Celestine is currently taking an apprenticeship at Peerigon to become a professional web developer. As part of her weekly routine, she publishes a blog post each week about what she has been doing and what she has learned.
Problem to solve
Last time I showed you many different frameworks and libraries. Maybe you remember React, Redux and MobX.
As a little reminder: React helps you to create reusable components, where Redux and MobX are libraries/frameworks for state management that can be used together with React.
In my blog article about Web Components, I created a small website. Now I rewrote this small example website three times using:
- React with component state
- React with MobX
- React with Redux
In the following I will present you the solutions and highlight differences and benefits of each method. The initial idea is when a button gets clicked, its status changes to isActive: true
and size: 26
. The status of the previous active button is reset to isActive: false
and size: 20
. Afterwards, only the components that changed should be re-rendered.
Solution
React + local state management
For me this was the easiest one to implement, because it is a straightforward way. You just define and change the state where you need it.
- No further library needed
- Mutable state
- Easy to understand
this.setState()
triggers a rerendering of the component tree- Handling of state changes is manual, so if you have to compare a new value with an old one, you do it by hand
React + MobX
With a little help of this tutorial, MobX was quite nice to get along as it uses the Observer and Observable pattern, which I have been familiar with due to my Java lectures at university. Finally something of my lectures was useful!
npm install --save mobx mobx-react
to enable using MobX with React- Mutable state
- Object Orientated Programming
- Oberserver and Observable Pattern: Observer gets notified about changes of the observable
- Changes to the store should only be triggered by actions, which are functions to control and handle changes
- Multiple stores for states possible
React + Redux
This was the hardest one for me and I still do not feel really confident when thinking about using Redux. But I think you get used to it, if you work with it more frequently.
npm install --save redux react-redux redux-thunk
to enable using Redux with React, where the last one enables async programming with Redux- Immutable state
- One big store object with many properties (single source of truth!), which would be separate stores in a MobX setup for instance
- Time travel through state history possible (for debugging!), cause there’s always a new state object created
- A provider component listens to changes and triggers rerendering
- Reducers for every state property which perform the change on the state according to actions
- Really good debugging tool: Redux DevTools
What I learned
- Think about your choice of frameworks carefully. Do you really need a framework for state management?
- If possible, work with that solution you feel comfortable with
- Some helpful links:
MobX vs Redux with React: A noob’s comparison and questions compares these two ways in a simple way.
Redux or MobX: An attempt to dissolve the Confusion compares these two more detailed.
Introduction to Redux and MobX shows the most important facts and terms about Redux and MobX.
Easy MobX and Redux Comparison compares Redux, MobX and local state management very vivid by setting up the same project three times.