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:


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$";


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


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

export const CounterAppHOCAll = () => {
    return <StateConnect 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}/>

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


We can also access any data property via props:



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);


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


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();

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

Last updated