This project is an attempt to illustrate different methods of managing application state in React as of version 16.3
It is a canonical todos application which uses a backend from todobackend to persist todos and state. It also uses antd as a component library.
I have organised each method into its own branch.
- Local State
- Redux with redux-thunk
- Redux with redux-observable
- Redux with redux-saga
- Mobx
- React Context
Local state is in the master branch and is the simplest out of the box solution with React. Application state is held in a top-level component (App), is updated with calls to setState and passed to sub-components using props.
This is in the redux-thunk branch, it uses a Redux store to track state, probably the most popular of the state management solutions for React.
redux-thunk is used to allow actions to return promises that dispatch state updates once they resolve.
From the redux-observable branch, this uses Rxjs via redux-observable to make actions epic!
Redux-saga uses the power of ES6 generators to make side effects like remote api data fetching easier to manage.
See the redux-saga branch.
In the mobx branch we take a break from redux and use an entirely different library - Mobx.
Mobx is very different to redux in that the state is mutable and changes are propagated by observing parts of it.
Finally, version 16.3 of React brought a re-implementation of the Context API which had previously been marked as experimental and unstable. The react-context branch shows how it can be used to remove the need to pass props down through multiple levels of the application tree.