Connecting: Connect your own component as a subscriber.
If you come from Redux, you might be more familiar with the Connecting concept, so it might be best to start learning from there.
If you had no previous experience with Redux, we will recommend to check out first our live rendering as it reduces the boiler plate.
Both mechanisms have valid use cases though, so it is good to be familiar with both.
Every time you subscribe to a new ConanState, that state is stored in the context to simplify access to it down the line.
This means, that if you know that the correct ConanState have been subscribed upstream of the component where you need to use it, then you can retrieve it easily from the context
This is very handy to describe widgets that have many sub-renderers where the correct state is subscribed to at the top level, so all the components down the line can assume that the state is in the context.
The context applies to both, live rendering and connecting state. In their respective sections, you will be able to see the specifics on how to access the context.
Direct. Invoking a connect or a render live method directly from a ConanState instance, this will leverage inlining JS on your render code.
HOC. Similar to direct, but available If you prefer to use a react HOC component as opposed to inline JS
Composition. We have functions that can take your own components and provide a new component where the properties for your component are automatically taken from the ConanState.
Redux developers might be familiar with the concept of composition where they have mapStateToProps
Hooks. We also have hooks if you prefer to use this approach
Subscribing to actions?
Every time you subscribe to a ConanState, we also pass the actions, but we only do this for convenience, as mentioned in the Actions & Reducers section, you can access directly the actions from the ConanState.
We are aware though that for convenience is neat to also receive them when you subscribe to the ConanState, specially if using the context state.
Monitor Info and Meta info
We would recommend getting familiar with the Conan State life cycle to understand what the Monitor Info and Meta Info are useful for.
When you subscribe to the data for a Conan State, you might to also want to subscribe to:
The Monitor Info produced in the Monitor Thread which tracks your async actions
The Meta Info produced in the Meta Flow which tracks information so that you can introspect what is happening inside the Conan State
This would be the case if you wanted to show for instance:
a loading screen while doing some async action. (Monitor info)
show a toast if there is an error happening. (Meta info)
In the sections detailing the two main options for connecting: live rendering and connecting we also go into detail to explain how to subscribe also to the Monitor Info and the Meta Info
To map, or not to map
If you need to connect your own component, you might want to map the ConanState to the shape of the props your component receives.
Otherwise, you can create components that receive as props an instance of ConnectedState, if you do so, you will be able to access the data. monitor info, meta info and the actions straight from its properties.
In Redux you have to always map state to props, this is because the state is global and you would not want to receive the whole state on your component.
In ConanJs the scope of the state is decided by you, the result of this is that you will likely be able to connect your state without mapping, yet again removing more boiler plate code.
1- If you need to only access the actions, you don't need to subscribe. You can access your actions directly from your state
2- If you know that the state is in the context, you can just get it from the context. Check each section for live rendering and connecting to see the details
3- If you can access directly to some atomic state. It might make sense to just use direct live rendering
4- If you need to adapt an existing component so that now is connected to a ConanState. Have a look at our connecting mechanisms
Please take a look at this code sandbox to see al the subscription approaches working: