Managing your react state with unstated
We have all been using redux to manage our React state for a while now, and it is a fantastic library but it is a bit more complicated to learn and it had a lot of steps to just manage your state. Also Redux didn’t feel like it is a React way of managing the state and with the new React Context API came along a new state management library that is very easy to learn and your write it with almost the same way as managing your state in components. Introducing Unstated
Let’s first see how a simple counter app would look like in normal React without any state management library:
This looks simple and easy to understand, but what if we want to pass in the count number to another component? now we need a state managing library such as Unstated to handle that for us. We firstly need to install the unstated module from the npm registry by using npm or yarn.
npm: npm install --save unstated
yarn: yarn add unstated
We will start of by wrapping our App or whatever main component in your application’s entry point (named index.js if you’re using create-react-app) with the “Provider” component supplied to us by unstated.
Unstated has this term called “containers”, now basically containers are well container components that manage a part of your application’s state and it can supply the state to any component in your application or a method to change the state, the element re-renders automatically if the state changes. We will create a file called CounterContainer.js and this is where we will be putting our state and its logic.
1- Firstly we will grab in the “Container” class from unstated
import { Container } from 'unstated'
2- Then we will create a new class that extends the Container class the same way we extend Component class from react and we put our state the same way we do in react too!
3- We add our increment and decrement methods also the same way as we do in React
Unstated uses this.setState too to change the current state.
Now that we have written our unstated container class, it is time to connect it to our react component.
1- import the container file in your component’s file and also import the Subscribe component from unstated, we also don’t need component class from react anymore and so we will use pure functions.
2- Now we will wrap our component with the Subscribe component and we will supply to it a prop called “to” which will be equal to a js array with our CounterContainer in it.
3- The child of Subscribe will be a function which will have only one argument, we will call it counter. This function is going to return our h1 and two button tags back.
4- The counter argument should provide us with the state and the methods we created in the container class and so we will supply the data to the onClick handlers and the count number to the h1 tag. To get the state we use counter.state.count in this case. For the click handlers we will supply a function that will return the increment and decrement functions correspondingly.
Now our application should work fine and you might thing well this is not that much easier than the default way of react but remember, now we can let any component “Subscribe” to the same container class and it will have the state the same way as the other component. The components do not have to communicate with each other via props or anything as unstated supplies the state and methods to them.
I hope you would’ve learned something from this, your feedback would be much appreciated and I will try to write more articles in the future hopefully.
If you would like to try out unstated without having to install or set up anything by yourself, maybe you can try out the boilerplate template I created on my github.
