State vs Redux vs Context

🤔

Seattle

MeetUp

#SeattleReactJS

Trivikram Kamat

Software Development Engineer

Twitter: @trivikram

Github: @trivikr

3

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?

Because in life and in software engineering, only one thing which remains constant is CHANGE!

https://github.com/

trivikr/

react-state-redux-context

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

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!

Trivikram Kamat

Twitter: @trivikram

Github: @trivikr

Slides: https://slides.com/trivikram/react-state-redux-context

React State vs redux vs Context

By Trivikram Kamat

React State vs redux vs Context

  • 1,229