useContext + useReducer vs Redux
Tags: javascript, react, learning
Published: 2024-01-14 01:23:36

I've discussed useContext and useReducer and have created an application using both in my blog series; now is the time to compare useContext + useReducer vs Redux!

1. Brief Summary of Redux
2. Recall React and React Hooks
3. Which to use

**Brief Summary of Redux**
Redux is a JavaScript library designed to manage global state in applications. It includes additional packages such as React Redux, which integrates with React, and React Toolkit, a useful tool for simplifying and enhancing coding efficiency.
The core concept of Redux involves a centralized store for the state, with predefined events called "actions" responsible for updating this state. 

> The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur.

> Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

[Redux Documentation](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)

**Recall React and React Hooks**
React follows a single data flow where data is passed from parent to child components. Through useContext, data defined in the context can be accessed from anywhere within components wrapped with the Provider. However, useContext alone does not handle state management; developers need to define state management using useReducer.

According to the React documentation, before React Hooks were released in React 16.8 in 2019, a class handled the state and other React features. Redux was then released in 2015 and gained popularity. Subsequently, in 2019, React Hooks, including useState and useReducer, were introduced in React 16.8, offering an alternative and more modern approach to handling state in functional components.

**Now, which to use?**

> Redux is more useful when:
> 1. You have large amounts of application state that are needed in many places in the app
> 2. The app state is updated frequently over time
> 3. The logic to update that state may be complex
> 4. The app has a medium or large-sized codebase, and might be worked on by many people

[Redux Documentation](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)

Use Cases:
1. Comprehensive e-commerce
2. Real-time messaging or chat application
3. Workflow management system for a content creation platform
4. Enterprise-level project management tool used by multiple teams within a company

There is a statement in bold font right below it:
> Not all apps need Redux. Take some time to think about the kind of app you're building, and decide what tools would be best to help solve the problems you're working on.

Additionally, it shares some blog posts (one of them was written by the Redux creator, Dan Abramov!), where, (to me personally,) most of the articles imply the usage of Redux only when needed.

One of the authors of the blogs points out a crucial thing that we should always keep in mind, so I'll share it here:

> you need to understand exactly what problems you are trying to solve in your own application right now, and pick the tools that solve your problem best. not because someone else said you should use them, not because they’re popular, but because this is what works best for me in this particular situation.

I was the one who used to choose Redux over React Hooks simply because I learned Redux at school, and useReducer and useContext seemed challenging. Now that I understand the history and usage of both, it's time to confidently consider why I would choose one over the other.