ConanJs - React state management for every use case.

Alberto
Alberto
Jul 29, 2020 · 4 min read

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:

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:

https://twitter.com/js_conan

ConanJs

News and updates for ConanJs

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store