🗡️
ConanJs
  • What is ConanJs?
  • Why ConanJs...
    • ... if coming from Redux
    • ... if using vanilla React
    • ... if learning React
    • ... if not using React
  • How to install/use ConanJs
  • About us / Github / Contact us
  • Demos
    • Demo Gallery
    • Conan State Demos
      • Hello World
      • Todos
        • Todos - Basic
        • Todos - Async
        • Todos - Optimistic
      • Github issues viewer
    • Conan Flow Demos
      • Authentication
  • CONAN DATA
    • General Concepts
    • Conan State
      • Actions & Reducers
        • Reducers
        • Actions
      • Creating State
      • Observing State
        • Live rendering
        • Connecting
      • Composing State
      • Scaling State
      • Orchestrating State
      • Life cycle
        • Async handling
        • Introspection
      • Testing state
    • Conan Flow
      • Creating Flows
      • Serialising Flows
      • Observing Flows
  • CONAN Runtime
  • Dependency Injection
    • General Concepts
    • Creating the Context
    • Using the Context
  • ASAPs
  • Logging
  • API
    • Main Classes
      • Conan
        • StateDef
      • ConanState
      • ConanFlow
        • UserFlowDef
        • UserStatusDef
        • Status
    • Conan State Classes
      • Thread
      • ConnectedState
      • MonitorInfo
      • MetaInfo
    • Dependency Injection
      • DiContextFactory
    • ASAPS
      • Asaps
      • Asap
Powered by GitBook
On this page
  • Direct
  • HOC
  • Composition
  • Hooks

Was this helpful?

  1. CONAN DATA
  2. Conan State
  3. Observing State

Connecting

In this section we will explore the three ways available in ConanJs to connect a component with a state. There are four ways of doing it:

Direct

We can use the Conan state object directly to connect to a component, using the method connect. This method will connect the whole state to the specified component

import { counterState$ } from "../../../state/counter.state$";

{counterState$.connect(CounterDisplay)}

We can also use connectMap to connect to specific parts of the state:

import { counterState$ } from "../../../state/counter.state$";

counterState$.connectMap(CounterContainer, (data, actions) => ({
    decrementCounter: actions.decrement,
    incrementCounter: actions.increment
}));

counterState$.connectMap(CounterDisplay, data => ({
    counter: data.counter
}))

import {counterState$} from "../../../state/counter.state$";

counterState$.connectMap<CounterContainerProps> (
    CounterContainer,
    (data, actions)=>({
        decrementCounter: actions.decrement,
        incrementCounter: actions.increment
    })
)

counterState$.connectMap<CounterDisplayProps> (
    CounterDisplay,
    data=>({
        counter: data.counter
    })
)

HOC

Using the ConanJs component StateConnect, we can connect a React component with a Conan state:

export const CounterAppHOCAll = () => {
    return <StateConnect from={counterState$} into={CounterContainer}/>;
};
export const CounterAppHOCAll = (): React.ReactElement => {
    return <StateConnect<CounterData, CounterActions>
        from={counterState$}
        into={CounterContainer}
    />
}

And then use the state's data and actions within our React component. We can also use Conan's component ContextStateConnect, to achieve the same purpose, connect the whole state with a component:

<ContextStateConnect into={CounterDisplay}/>
<ContextStateConnect<CounterData, CounterActions>
    into={CounterDisplay}
/>

Inside the component, we can invoke the actions defined in the state, via props:

this.props.actions.decrement

We can also access any data property via props:

<h1>{this.props.data.counter}</h1>

Composition

We can also use compositions with the components contextStateConnect and contextStateMapConnect

contextStateConnect will connect the whole state:

import {stateConnect, contextStateConnect} from "conan-js-core";

stateConnect(counterState$, CounterContainer);

contextStateConnect(CounterDisplay)
import {ConnectedState, stateConnect, contextStateConnect} from "conan-js-core";

stateConnect<CounterData, CounterActions>(
    counterState$,
    CounterContainer
)

contextStateConnect<CounterData, CounterActions>(CounterDisplay)

contextStateMapConnect will connect only the specified properties:

import {stateMapConnect, contextStateMapConnect} from "conan-js-core";

stateMapConnect(counterState$, CounterContainer, (data, actions) => ({
    decrementCounter: actions.decrement,
    incrementCounter: actions.increment
}));

contextStateMapConnect(CounterDisplay, (data) => ({
    counter: data.counter
}))
import {ICallback, contextStateMapConnect, stateMapConnect} from "conan-js-core";

stateMapConnect<CounterData, CounterContainerProps, CounterActions>(
    counterState$,
    CounterContainer,
    (data, actions)=>({
        decrementCounter: actions.decrement,
        incrementCounter: actions.increment
    })
)

contextStateMapConnect<CounterData, CounterDisplayProps, CounterActions>(
    CounterDisplay,
    (data)=>({
        counter: data.counter
    })
)

Hooks

ConanJs has the hooks useConanState and useContextConanState to connect to a state:

import { counterState$ } from "../../../state/counter.state$";
import {useConanState, useContextConanState} from "conan-js-core";

const [, actions, ConanContext] = useConanState(counterState$);
const [data] = useContextConanState();
import {CounterActions, CounterData, counterState$} from "../../../state/counter.state$";
import {useConanState, useContextConanState} from "conan-js-core";

const [, actions, ConanContext] = useConanState <CounterData, CounterActions>(counterState$);
const [data] = useContextConanState <CounterData, CounterActions>();

Please take a look at this code sandbox to see al the subscription approaches working:

PreviousLive renderingNextComposing State

Last updated 4 years ago

Was this helpful?

https://codesandbox.io/s/2zgr0codesandbox.io