0

No practical purpose to this question, just tryna connect concepts to get my head around switching from Redux to using useReducer and React contexts - is a Context when used with useReducer` basically a redux store that's only available to components that explicitly import it?

Ollie Khakwani
  • 754
  • 1
  • 8
  • 17
  • Redux is more powerful, flexible, and complicated. If you need that power/flexibility, you aren't going to get it from useContext + useReducer. If you don't, then the latter is much, much simpler to use. – Jared Smith Aug 03 '20 at 18:08

2 Answers2

2

No. Context and Redux are very different tools that solve very different problems.

Context is simply a mechanism to make a single value accessible to a portion of your component tree. It's up to you to write the code that determines what that value is and how it gets updated. This is typically done by storing data in React component state, and creating a value that is passed to a <MyContext.Provider>.

Redux is a separate UI-agnostic state management library that is designed to help you write predictable state update logic and track when, where, why, and how your state has updated over time, with the React-Redux UI bindings layer allowing your React components to interact with that Redux store.

Now, yes, useReducer+useContext do have some similarities to Redux in terms of how your component will interact with them, but they also have very different performance characteristics in terms of when and why your components will re-render.

Please see my extensive post on A (Mostly) Complete Guide to React Rendering Behavior and my additional posts Redux - Not Dead Yet! and React, Redux, and Context Behavior for details on how Redux and Context differ and how

markerikson
  • 63,178
  • 10
  • 141
  • 157
0

It is not hard to implement the exact logic of react-redux by means of useContext, useReducer and maybe useSelector)

But useContext + useReducer is not a full replacement of Redux.

useReducer is just an alternative to useState.

And useContext comes with https://en.reactjs.org/docs/context.html#caveats To store multiple values you have to https://en.reactjs.org/docs/context.html#consuming-multiple-contexts