ConanJs - React state management for every use case.
ConanJs the new framework to manage State in React. This article is for you if you use Redux, or Vanilla react.
Global State (Redux), setState (DIY), or Context + Hooks ?
When managing state with react, nowadays it all seems to boil down to three options, let’s review them in order of simplicity
setState (DIY)
This is the old school way of working with state in React, you have some state, and you update it with setState.
If you need to update the state in a component other than where this state is host, you pass a callback prop to update it.
Everyone that has worked with React for any meaningful time, should be familiar with this pattern
PROs
- Simplest way to manage state
CONs
- It does not scale up well, if many parts of you app need access to this state, then it becomes painful to maintain.
Global State (Redux)
As an alternative approach, the concept of global state was introduced, and now is very popular, we mention in this article Redux, but this pattern of global state has been reused by other very popular frameworks
The main selling point here is that the state is externalised into a unique global immutable store.
The react components map them to this state and the actions to update it.
PROs
- State is encapsulated and managed separately
CONs
- Boilerplate code to wire the state and the components
- It does not scale down well, It might lead to add to the store state that should be local.
Context + Hooks
Lately there is a new paradigm that seems to mix principles from both approaches already reviewed.
Using context and hooks lets you leverage the principle of having state isolated in any component, and retrieve it from the context.
You can simulate having global state by just placing the state on your top component, and retrieve it from the context.
PROs
- Lets you scope your state through the context globally or at a component level, it’s your choice
- Much less boilerplate than most store frameworks
CONs
- You must use hooks for it to be effective.
- Code is not intuitive.
- State is not encapsulated.
Enter ConanJs — Why choose? Have everything!
One major source of trouble for us at ConanJs when we started a project was choosing a paradigm to manage the state.
Basically we always ended up by using a combination of the three paradigms mentioned above and honestly, having a hard time.
ConanJs let’s just manage state as its own independent capsule of state. At its core each Conan State is a plain Javascript object that you can scope anyway you want.
Let’s have a look at the simplest example possible, we call it the “Hello Wow!”
That example highlights some of the advantages of using ConanJs to manage your state, but lets summarise them here:
- The state is created as a a plain JS Object, for instance using our Conan.light method
- After you have created the state, is ready to be updated, you don’t need to write any actions, reducers or any other boiler plate code.
- You can update the state directly on the Conan State object itself, no need to map dispatch or pass callbacks as properties.
- No need to provide with boiler plate code to handle async actions.
- The framework gives you meaningful and configurable logging out of the box.
- You can easily test end to end the Conan State in isolation.
- You can scope your state anyway you want, local, global.. You name it.
- Connect your state anyway you want, there are hooks, live rendering, connectors…
- Compose and derive state easily no need to write selectors, slices…
- Orchestrate state to handle complex requirements
As you can see, we have put a lot of emphasis on separating the state from the UI, this allows us to let you decide how and where to use the state.
Without ConanJs, you will have to choose between one of the flavours from the three principles explained at the beginning Global State (Redux), setState (DIY), or Context + Hooks, and you will have to live with the constraints associated with that decision.
With ConanJs, you can make your state into its own decoupled layer with TACOS
TACOS is the acronym we have come up to describe what makes this capsules of data special:
- Testable Testing state e2e is simple
- Actionable If you can access the state, you can change it through an action
- Composable You can create new state from already existing state easily.
- Observable You can observe state and receive updates when the state changes.
- Scalable You can have your state global, or you can scope it.
If this was not enough, we also provide with Conan Flows to map state that has statuses. We call them both Conan Data.
Conan Data is better explained here:
As you can see having Conan Flows is also a big advantage, as it will let you map state that has statues, like user authentication.
What’s next
If you like what you saw, and you want to get started:
To check our github repo — and give us a star ;)
To contact us:
