Week 7: React, Redux and MobX

By Celestine Auburger

Peerigon
Peerigon
3 min readNov 28, 2018

--

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.

Example website realized with React and local state management.
  • 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!

Example website realized with React and MobX
  • 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.

Example website realized with React and Redux.
  • 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

--

--

Peerigon
Peerigon

We build cutting-edge software based on open web standards.