Why React projects still use Redux in 2020?

There has been a lot of talk lately of why Redux is not a good option anymore for state management, and why we should use hooks & the React Context API.

As a Redux user, I want to settle the war between Context API & Redux. So let the battle start!

Mark Erikson

@acemarke

I've said for the last couple years that Redux is used by around 50% of React apps, based on various sources (NPM DLs, polls, etc). Just saw the results of the "State of Frontend 2020" survey, which once again shows basically that same result (48%):

tsh.io/state-of-front

15:13 PM - 07 Aug 2020

7 22

Why Redux

Redux got popular for a few reasons:

• easy to test
• unidirectional data flow makes it deterministic
• state is read-only
• changes are made with pure functions
• huge ecosystem

The problem Redux wanted to solve is predictable state updates. Knowing where and why the state changes and having a "single source of truth" can be an advantage.

I personally think the biggest advantage is testability.

Big apps are constructed on top of lots of tests.

When applications grow past a certain size, it is pretty obvious no engineer will know exactly what all modules & tiny pieces do.

That's where tests come into place. Tests are the foundation of good software. And Redux code is very easy to test.

Redux proved to be battle tested in big React apps. Those apps will be around for a long time and continue to use it. Almost half of React apps use Redux (according to polls and dev surveys) - so you can probably figure out why it's so popular & unpopular at the same time.

The Redux ecosystem

Redux has a large ecosystem of tools and nice things that can help developers do other things than state management. This is a short list, for a more extensive one look here.

Debugging

• redux devtools
• redux-logger

Side effects

• redux thunk - for async state handling
• redux saga - awesome for complex API calling flows, based on ES6 generators
• redux observable -RxJS-based middleware for Redux
• redux persist - pretty much as the name states - persists the stores so you don't need to load everything again next time the user will refresh the app - making it an offline first app

Integrations

• redux socket.io - for using the popular socket.io realtime communication library
• redux react firebase - firebase integration

And many, many others....

What to consider if using Redux

Beware of anti-patterns:

making state that needs to be local -> state global

For example making form data global - that's just silly. Forms state usually is cleared after it is submitted to the server.

Dan Abramov

@dan_abramov

@BenLesh I dont like Redux very much, but this sounds like the opposite of its problems? With Redux, you *do* know deterministically where the code lies because you can follow the reducer chain. The problem is that what shouldve been local often becomes global.

16:00 PM - 22 Mar 2020

36 335

server state - think if what you are storing is just server state instead of global application state, and in those cases consider solutions as react-query or swr. Those tools have things like Auto Caching + Refetching built in.

State duplication - this is a general state management problem. You should avoid duplicating state if possible and instead derrive it where needed.

Doing state updates outside the reducer
Don't do this:

const initialState = {  complexObjectArray: []}const badPracticeReducer = (state = initialState, action) => {  switch(action.type) {    case "UPDATE": return {...state, ...action.payload}    default: return state;  }}const nextState = badPracticeReducer(initialState, {  type: "UPDATE",  payload: someArray.map(createComplexObject)})

Learn best practices

An exhaustive list of Redux best practices and things to avoid can be found here - compiled by the Redux maintainers.

Should you learn Redux in 2020?

Yes - if you want a React job it's a 50-50 chance that the company you go to uses Redux for its product.

But not just because of that - the concepts that Redux became popular for - unidirectional data flow, pure functions, immutable state updates are still worth learning and might make you a better software engineer.

What about Context API?

While I was also advocating for the Context API for new applications, I am not doing it because I don't like Redux or I don't acknowledge the benefits of using Redux.

Alexandru-Dan Pop

@alexandrudanpop

#React tip:
Use the React Context API for shared / global state

The context API is mature enough that most project won't need an external more sophisticated state management solution.

reactjs.org/docs/context.h

#100DaysOfCode #programming

11:41 AM - 28 Jul 2020

6 3

I am simply advocating for the solution that will have less complexity for new developers. Using Context API is easier than Redux because it will always go together with hooks that you already know like useState or useReducer.

Redux adds an extra layer of complexity to our application that we carefully need to weight.

Conclusion

I would say Redux is a good candidate for applications of high complexity. Also when the libraries in the Redux ecosystem make sense (for example - if sagas would make it easier to reason about very complex async flows).

When working with people newer to the React ecosystem and you don't really need the things from the Redux ecosystem I would go with Context API.

Leave a & if you like this article, also check out my Twitter where I post more cool content.

Comment below
Are you using Redux or Context API?