Connecting

Search…
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 
Js
1
import { counterState$ } from "../../../state/counter.statequot;;
2
​
3
{counterState$.connect(CounterDisplay)}
Copied!
​
We can also use connectMap to connect to specific parts of the state:
Js
Ts
1
import { counterState$ } from "../../../state/counter.statequot;;
2
​
3
counterState$.connectMap(CounterContainer, (data, actions) => ({
4
    decrementCounter: actions.decrement,
5
    incrementCounter: actions.increment
6
}));
7
​
8
counterState$.connectMap(CounterDisplay, data => ({
9
    counter: data.counter
10
}))
11
​
12
​
Copied!
1
import {counterState$} from "../../../state/counter.statequot;;
2
​
3
counterState$.connectMap<CounterContainerProps> (
4
    CounterContainer,
5
    (data, actions)=>({
6
        decrementCounter: actions.decrement,
7
        incrementCounter: actions.increment
8
    })
9
)
10
​
11
counterState$.connectMap<CounterDisplayProps> (
12
    CounterDisplay,
13
    data=>({
14
        counter: data.counter
15
    })
16
)
Copied!
​
HOC
Using the ConanJs component StateConnect, we can connect a React component with a Conan state:
Js
Ts
1
export const CounterAppHOCAll = () => {
2
    return <StateConnect from={counterState$} into={CounterContainer}/>;
3
};
Copied!
1
export const CounterAppHOCAll = (): React.ReactElement => {
2
    return <StateConnect<CounterData, CounterActions>
3
        from={counterState$}
4
        into={CounterContainer}
5
    />
6
}
Copied!
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:
​
Js
Ts
1
<ContextStateConnect into={CounterDisplay}/>
Copied!
1
<ContextStateConnect<CounterData, CounterActions>
2
    into={CounterDisplay}
3
/>
Copied!
Inside the component, we can invoke the actions defined in the state, via props: 
1
this.props.actions.decrement
Copied!
We can also access any data property via props: 
1
<h1>{this.props.data.counter}</h1>
Copied!
​
Composition
We can also use compositions with the components contextStateConnect and contextStateMapConnect
contextStateConnect will connect the whole state:
Js
Ts
1
import {stateConnect, contextStateConnect} from "conan-js-core";
2
​
3
stateConnect(counterState$, CounterContainer);
4
​
5
contextStateConnect(CounterDisplay)
Copied!
1
import {ConnectedState, stateConnect, contextStateConnect} from "conan-js-core";
2
​
3
stateConnect<CounterData, CounterActions>(
4
    counterState$,
5
    CounterContainer
6
)
7
​
8
contextStateConnect<CounterData, CounterActions>(CounterDisplay)
Copied!
​
contextStateMapConnect will connect only the specified properties:
Js
Ts
1
import {stateMapConnect, contextStateMapConnect} from "conan-js-core";
2
​
3
stateMapConnect(counterState$, CounterContainer, (data, actions) => ({
4
    decrementCounter: actions.decrement,
5
    incrementCounter: actions.increment
6
}));
7
​
8
contextStateMapConnect(CounterDisplay, (data) => ({
9
    counter: data.counter
10
}))
Copied!
1
import {ICallback, contextStateMapConnect, stateMapConnect} from "conan-js-core";
2
3
stateMapConnect<CounterData, CounterContainerProps, CounterActions>(
4
    counterState$,
5
    CounterContainer,
6
    (data, actions)=>({
7
        decrementCounter: actions.decrement,
8
        incrementCounter: actions.increment
9
    })
10
)
11
​
12
contextStateMapConnect<CounterData, CounterDisplayProps, CounterActions>(
13
    CounterDisplay,
14
    (data)=>({
15
        counter: data.counter
16
    })
17
)
Copied!
​
Hooks
ConanJs has the hooks useConanState and useContextConanState to connect to a state:
Js
Ts
1
import { counterState$ } from "../../../state/counter.statequot;;
2
import {useConanState, useContextConanState} from "conan-js-core";
3
​
4
const [, actions, ConanContext] = useConanState(counterState$);
5
const [data] = useContextConanState();
6
​
Copied!
1
import {CounterActions, CounterData, counterState$} from "../../../state/counter.statequot;;
2
import {useConanState, useContextConanState} from "conan-js-core";
3
​
4
const [, actions, ConanContext] = useConanState <CounterData, CounterActions>(counterState$);
5
const [data] = useContextConanState <CounterData, CounterActions>();
6
​
Copied!
​
Please take a look at this code sandbox to see al the subscription approaches working:
Live rendering
Composing State
Last modified 1yr ago
Copy link
Contents