Do you need Redux? Is Redux dead?
I hear really often that "Redux is dead, we don't need Redux anymore because we have React hooks and React.context" and so on. So let's clarify if you need Redux at all or it is outdated and there are better alternatives.
Myth #1: We have React hooks
So Myth #1 "Redux is dead because we have React hooks and we don't need Redux anymore". This normally comes from the beginners with the lack of understanding which is doing what. React hooks is not an alternative for Redux at all. You might think that useReducer hook is an alternative as it is really the idea to bring Redux to React default package but useReducer is just a reducer implementation. So it will be your local state in your component. It is not global and can't be shared between components.
export const User = () => {
const [state] = useReducer(reducer, initialState);
return <div>{state.username}</div>
};
Myth #2: We have useReducer + React.context
Myth #2 is "Redux is dead because we have useReducer hook plus React.context". And actually it is partially true. If you put useReducer in your global React context you will have a global object which you can access everywhere and dispatch changes to this object. But for some reason people don't say that we have React.Context directly inside Redux itself. So it's not like Redux was build before and now we have React.Context so we don't need Redux.
export const QuizContext = createContext();
export const QuizProvider = ({ children }) => {
const value = useReducer(reducer, initialState);
return <QuizContext.Provider value={value}>{children}</QuizContext.Provider>;
};
Redux is not only a global state and dispatch method. It's a certain architecture with strict rules, like actions structure, how to implement async actions, how to memoize and select data from the state and much more. You get a scalable architecture for you and your team so everybody do things in the same way. If you just take React.context you can register more than 1 of contexts, you need to think how to synchronize them, everything is raw and can be done in different ways and now you need to write and support architecture yourself.
Sure Redux is not the only way to go but it's for sure not dead this is why you can see it in all frontend vacancies so often.
Myth #3: NgRx vs Services
Myth #3 is related to Angular and Ngrx (it's Redux implementation of Angular world). A lot of students asked me that they don't see the benefits of using NgRx because in Angular we have services. In React they are not asking this question that often because we have just components there are no services. In Angular we have a place where we can store some data and share them between components out of the box. In React we don't have services so people are less concerned. So the question is do we really need NgRx if we have services? Well services is just a low level singletone without any architecture.
@Injectable()
export class SomeService {
}
You can write inside anything that you want, variables, objects, streams and any functions. It doesn't give you any architecture so your services can look completely different if they are written by 2 different people.
NgRx on the other hand implements Redux architecture covered by types and really strict. You have way to dispatch actions, define selectors and reducers and the special streams approach to write async code in Angular way.
// action
export const retrievedBookList = createAction(
'[Book List/API] Retrieve Books Success',
props<{ books: ReadonlyArray<Book> }>()
);
// reducer
export const initialState: ReadonlyArray<Book> = [];
export const booksReducer = createReducer(
initialState,
on(retrievedBookList, (state, { books }) => books)
);
// component
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
bookCollection$ = this.store.select(selectBookCollection);
}
So it's not about Redux vs Service it's about having an architecture vs not having it.
It's always easier to build something based on strict rules in the same way. Then all your code is looking the same even when it is written by different people.
What is in Vue?
In Vue the situation is similar to Redux. We have a Vuex which provides global state and gives you all the same architectural benefits like Redux.
Conclusion
So is Redux dead? Not at all, I still see Redux architecture in almost any company with frontend SPAs in every frameworks. And there is a reason for that it's simple, it's scalable and it's strict.
Should you understand Redux if you want to be a good frontend developer? Yes for sure.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
