Once the ConanState is created, we need mechanisms to add subscribers so that we can display the latest version of the state in the UI.
When deciding how to subscribe to your ConanState, you will have two options.
Live Rendering: Subscribe to the state on the fly on your renderer
Connecting: Connect your own component as a subscriber.
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
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.
There are 4 options to subscribe that we support
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.
Hooks. We also have hooks if you prefer to use this approach
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.
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
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.
1- If you need to only access the actions, you don't need to subscribe. You can access your actions directly from your state
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: