Redux -> Context
https://github.com/oreqizer/redux2context
Redux
• Predictable state container

• Allows time travelling
• Easy rehydratation

• Global action tracking via middlewares

• Logging, side effects
16.3 Context API
• Solves legacy context API’s problems:

• ugly API

• pure rendering issues

• Utilises render props
Redux vs. context
• Time travelling

• Middlewares

• Rehydratation

• Centralized

• Global state management
Redux vs. context
• Time travelling

• Middlewares

• Rehydratation

• Centralized

• Global state management
Redux vs. context
• Time travelling

• Middlewares

• Rehydratation

• Centralized

• Global state management
Redux vs. context
• Time travelling

• Middlewares

• Rehydratation

• Centralized

• Global state management
Redux vs. context
• Time travelling

• Middlewares

• Rehydratation

• Centralized

• Global state management
Redux vs. context
• Time travelling

• Middlewares

• Rehydratation

• Centralized

• Global state management ✅
Context intro
• Provider sends data down the app

• Consumer gets them as a function argument

• Has a default context

• Is static by default, needs a wrapper stateful component
for mutations
Reducer -> class
• React’s component class holds a context’s state

• Action creators -> class callbacks

• Reducer function -> changing local state

• Selectors -> ¯\_(ツ)_/¯
FAQ
• Do I need Redux? - most likely not

• Do I need context? - most likely yes

• When to use Redux? - when you need 1+ of its exclusive
features

• When to use context? - when you need global data in yo
app

• Syncing with a backend? - GraphQL
Q&A