State vs Redux vs Context

🤔

Seattle

MeetUp

#SeattleReactJS

Trivikram Kamat

Software Development Engineer

Twitter: @trivikram

Github: @trivikr

My history with React.js

• Worked with React.js 0.14.x and 15.x in 2016
• Maintainer of confs.tech CRA app
• Working with React.js 16.x for last 3 months

What will you learn?

• How to manage state?
• How to use Redux?
• How to use Context?
• How to use MobX?

Let's change the requirements

Why?

Clone the app and play around...

Using Redux

• Connect the component to Redux

• mapStateToProps

• Create the store

• Create the reducer

• Provide store to the app

• Wire up actions

git checkout redux

Switch to redux branch and notice the differences with master

Advantages of Redux

• Connect is pure - components will only re-render when their props change

• Debugging using Redux devtools https://github.com/zalmoxisus/redux-devtools-extension

• Customize Redux with Middleware https://medium.com/@jacobp100/94ffe991e6

Using MobX

• Create observables and Provider
• Create observer and Consumer
• Add actions

git checkout mobx

Switch to mobx branch and notice the differences with master

Advantages of MobX

• much easier to understand than Redux, uses OO or Reactive Programming principles
• Also ships with DevTools https://mobx.js.org/best/devtools.html
• Uses decorators which results in cleaner code!

Using Context API

• Create Context (with default values)
• Create Store (with Provider)
• Add Consumers

git checkout context

Switch to context branch and notice the differences with master

Advantages of Context

• no external dependency - built-in in React
• It's the basis for future APIs (like Suspense)

Thank you for listening!