Handling state in an application is like juggling with data. This article is about a very interesting way of handling state in your React app with Overmind.js
Why Overmind?
There are many tools for state management out there like Context-API, Redux, MobX or MST. So why we want another one?
In my latest client project I used context based state together with Apollo Client. I'm a huge fan of React Hooks and together with Context-API it's a very nice way to handle state in your application. It seemed to me that I didn't need any bigger state management solution like Redux anymore. In the beginning this was totally fine and I was happy with this approach but after two months the app became bigger and complexity was growing. I wasn't happy anymore and I decided it's time to switch to a different solution.
Back in the days I used and liked Redux a lot and I felt very comfortable with it, but it always had a smell of "too-much-code" for small stuff. On the other hand I never really used MobX but heard only good things about it. After doing some research I found new library called Overmind which locked pretty interesting.
Combining the best together
Overmind was created by Christian Alfoni with the goal to give the best developer experience as possible and also to have strong TypeScript support. The framework internals are hidden to the developer and the API is very simple and straight forward.
- strong TypeScript support
- very simple API
- good documentation and easy to learn
- great devtools
I think one of the best things you get with Overmind is that you have fully typed code nearly for free.
Defining state
Define your state as a simple object. Even if it is Typescript you can define your state as simple like this:
const state = {
// title: string
title: "",
// count: number
count: 0,
// foo: Foo | null
foo: null as Foo | null,
}
HINT: Don't use undefined or ? in your state because it is just considered an anti pattern. Any undefined value on a state will not show up in the devtools, it will not be passed to server or saved in local storage.
Everywhere you use the state you have full TypeScript support and code completion. SIMPLE, right?
Derived state
Derived state are computed values based on other state. In Overmind you define your derived state directly next to the state.
Here we define a computed state variable, doubleCount. It is important to note that the function is memoized by default and runs only when count has changed.
const state = {
count: 0,
// memoized function that only executed when count change
doubleCount: (state) => state.count * 2
}
In Redux you would have to write selectors and use libraries like Reselect to memoize the calculation. But not in Overmind, it's already included. SIMPLE, right?
State mutation
All state mutations are done with actions. Actions have access to your state and can directly change properties.
function incCount(state) {
state.count = state.count + 1
// hint: you get fully typed state and actions here
state.count = "three" // TS Error: Should be number
}
function resetCount(state) {
state.count = 0
}
function setCount(state, value) {
state.count = value
}
HINT: You can't mutate state outside the actions, this means you can't accidentally try to change them in your views.
There is no spread madness like in Redux that comes with immutability. Just change what you want to change. SIMPLE, right?
Side effects
Effects allow you to decouple your app completely from 3rd party APIs. You can read more about them here: overmind effects.
From the docs: Developing applications is not only about managing state, but also managing side effects. A typical side effect would be an HTTP request or talking to localStorage. In Overmind we just call these effects.
Effects should be "initialized" in the onInitialize function of Overmind. There you can provide them with all stuff they need like getters for getting current state or actions to execute.
export const onInitialize = ({ state, effects, actions }) => {
effects.myCoolEffect.initialize({
getSomeState: state.partOfState,
onMoviesLoadSuccess: actions.setMovies
})
}
Access state and actions in components
To get state in a component you have to connect it to Overmind. This is done with the useOvermind hook that provides state and actions. All you have to do is to deconstruct the hook result and you have all you need.
function Counter() => {
// hint: you get fully typed state and actions here
const {
state: { count },
actions: { incCount }
} = useOvermind()
return (
<div>
Count: {count}
<button onClick={incCount}>INC</button>
</div>
)
}
This is all? Yes, it is nuts how easy it is to get state and actions into your components. But wait: How can we prevent the component from rerendering when other parts of the global state have changed, like the title? Our component is only interested in the count property and only wants to rerender if this value changes.
Guess what: Overmind nows exactly which parts of the state the component is using and updates the component only when this part of the state changes. SIMPLE, right?
Mutation tracking
Overmind is using mutation tracking instead of immutability, you can read more about this concept here: immutability vs. mutation tracking.
Christian Alfoni: How you detect the changes and update the UI should just work and be performant! With mutation tracking you put your faith in the system. It relieves you of the mental load of figuring out how components update, it just works and optimally so.
Powerfull devtools
Overmind comes with very powerfull devtools. You can use the VSCode extension or use the standalone version
npx overmind-devtools
You can see all your state and derived state, it's even possible to change it directly inside the tool. You can also see all executed actions with their payload and what part of the state they changed. Sending an action? Sure, you can do this as well.
The view of your app is just an implementation detail. You can write and execute your whole application logic without any views, just with the help of the devtools. This is amazing and SIMPLE, right?
Functional programming style
I'm a big fan of functional programming paradigms, that were introduced with React and became the default in the React world after the release of hooks. Overmind perfectly fits into this. You write only functions, there is no need for classes.
When I had a look in MobX this was a big downside for me because all the examples use classes and I don't want to use classes anymore if possible.
What about pure functions? Mhhh yes sure, Overmind actions are not as pure as regular reducers. In practice it's not a real downside to me because you can test your actions very easy anyway.
Documentation and learning curve
Overmind has a very good documentation. I read it, started to try it in my appliaction and after 3 hours I had refactored my whole app.
The framework internals are hidden to the developer and the api is very simple and straight forward. There is no additional hidden stuff to learn like reselect, redux-sagas, redux-thunk etc.
Cool side note: this was super easy, I was very confident to do the changes because I used react-testing-library. The tests were testing the functionallity of the components without implementation details. I had to do only very little adjustments in test initialization.
After few hours you should already feel very comfortable. Back in the days it took me weeks to wrap my head around Redux. I tried also MobX (while learning Overmind) and it is much harder to read through the docs and to understand all this observer and observable stuff if this is completly new to you.
Running examples
Here you can see a working example on Codesandbox:
Codesandbox Example TypeScript
Summary
I'm so happy I found Overmind, it makes really a lot of fun to use and it simplyfied my app completely. I hope this article can help to convince you to give it a try.
Top comments (5)
Hey Martin, thank you for writing this great article 👏🏻
I am curious did you have a need to manage business logic between components with Overmind? The example I coded a few months ago consists of 3 components: Slider, ButtonA and ButtonB. ButtonA should be turned on (has prop active) in this situations:
In addition if Slider has value 0:
I've implemented it using
Zustandstate management and Mediator pattern, but I'm curious how do you code it with Overmind?Curious as well! @madflanderz :-)
Awesome summary! Thanks for sharing your thoughts Martin.
Hey Martin ,thank you for wrting this great article,
i have a question and i asking for your help ,
if i have a overmind effect that fetch api data ,
how can i set the fetched data from overmind effect in any component internaly state
i used useStatehook and written code like that
setResults(state.stocks.data.results).
but it doesn't work it seems that there is somethind wrong can you help me please ?
after i have writtne this comment i actually discoverd the answer , so i will write it in case anybody needed it,
so, the effect is fetching api data and the fetched api data is stored in overmind state ,
so if you need to make the commponet store the overmind state in his internal state
you will use useEffectHook
inside this hooks you will only have to call the overmind effect to fetch the data (it will be better if you called it inside a function )
for example:
const fetchData = (url) => {
actions.stokcs.fetchStocks(url);
};
and useEffect Hook :
useEffect(() => {
fetchData(URL);
setResult(state.stokcs.stockData.results)
}, [state.stokcs.stockData]);
all you need is just to add your overmind state object as dependecny in the overmind