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:
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
import { counterState$ } from "../../../state/counter.state$";
{counterState$.connect(CounterDisplay)}
We can also use connectMap to connect to specific parts of the state:
Js
Ts
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
})
)
Using the ConanJs component StateConnect, we can connect a React component with a Conan state:
Js
Ts
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:
Js
Ts
<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>
We can also use compositions with the components contextStateConnect and contextStateMapConnect
contextStateConnect will connect the whole state:
Js
Ts
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:
Js
Ts
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
})
)
ConanJs has the hooks useConanState and useContextConanState to connect to a state:
Js
Ts
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:
Last modified 2yr ago