Observing State

Introduction

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.

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.

ConanState Context

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.

Contextual state is also a core principle of how to scope your state

Subscribing options

Type of connection

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.

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.

Guidelines

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

Demo

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