React State Management with MobX and Redux

Nils Hartmann / @nilshartmann

Oliver Zeigermann / @DJCordhose

Slides: http://djcordhose.github.io/react-workshop/2017_jsunconf_mobx_redux.html

Starting Point

Distributed State across components

Motivation for State Management using a dedicated library

State distributed over many components can make applications hard to understand and debug

Often more than one component depends on a certain part of state - especially hard to do when components are not even in the same hierarchy

State management and handlers are extracted from React components

Better separation of concerns

Option 1: Redux

Render Cycle in Pure React

Redux Extracts Responsibilities

Resulting Redux Architecture

Option 2: MobX

Demo

Looking at the code

Resources