The Read on Redux (vs Context)

A question I ran into when learning Redux was:
What’s the difference between the React Context API and Redux?
So I did some research...

What we will go over:

• What is Redux?
• What is Context?
• How does data flow when using Context and Redux?
• The Pros and Cons of Redux and Context

What is Context?

The React Context API creates "global" data that can be easily be passed down in a tree of components. This is used as an alternative to “prop drilling” where you have to traverse through a component tree to pass down data with props.

React Context consists of:

React.createContext

This is where you create a Context object. This is the object that wraps around your components and allows the children components to subscribe to the Context object. When a child component renders it will read the current context value from the closest matching Provider above it in the tree.

Context.Provider

Every Context Object comes with a Provider React Component which wraps around components you want to be subscribed to the Context object and changes that happen to the context. Every component wrapped in the Provider component is a consumer of the context.

The Provider component accepts a value prop that is passed to consuming components
The main thing to remember is that all consumers of a Provider will re-render whenever there is a change to the Provider’s value prop.

I like to think of Context as a flower pot. The Provider component is like the pot of the plant. The Provider component takes in data through the value prop similar to how the flower pot takes in water. That data is then available to the consumers of the Context much like water flows through an entire plant from the watered pot.

What is Redux?

Redux is a state management library used to store and manage the state of a react application in a centralized place. Redux abstracts all states from the app into one globalized state object so that any component and any part of the app can access the different properties of the global state. Redux is separate from React and there are tools react offers to help integrate Redux into React apps such as the React Toolkit.

Redux consists of:

Actions

Actions describes what you wanna do to your states.

Reducers

Reducers describe how your actions transform from state to state and keeps track of the actions you are switching from.

The store

The Store is the object that brings the actions and reducers together.

How does data flow when using Context and Redux?

To best demonstrate how Context and Redux are used, I created a code sandbox where I demo both Redux and Context in a small application. In my app, each pet is either asleep or awake. Click the Wake Up or Sleep buttons to see how each pet image is rendered using Redux or Contex in the console.

If you click the Context button, the console will log what pets have been rendered using Context.

If you click the Redux button, the console will log what pets have been rendered using Redux.

There are a few ways you can use Redux in a React application. In the redux.js file, we took advantage of some of the APIs from the Redux toolkit package.

These are the different parts that make the data flow in the Redux demo:

• createAction() is a helper function that accepts an object of reducer functions a slice name, and an initial state value. It will automatically generate action creators and action types that correspond to the reducers and state.

• configureStore() is an abstraction over the standard createStore in Redux, which creates the global store. In the example, our reducer is being passed in.

• connect() this function connects a React component to a Redux store.

• We then use <Provider> to make the store available to the components.

Notice how when you click the button of one pet, the other pets do not render in the Redux demo. This is because, in
connect(), when mapState is called, it will check to see if the state has changed or not, only if it has it will re-render. This is one of the benefits of using Redux and helps optimize larger applications with many changing states.

The Pros and Cons of Redux and Context

Both Context and Redux are ways to manage state in a React app.

The main benefit of using Context is that it is simpler to use and is a great way of passing state down to any level of a component tree without having to pass props down through traversal.

The cons of using Context is that unless you separate your different states into separate Providers, the consumers of a provider will rerender if the context of a Provider changes. This can be very inefficient in a large app where the are many states you use as the context in a provider or if only a few states change that effect the renderings of other components.

Redux, on the other hand, attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen and are great for applications that have multiple states that will reach different components in a component tree. Redux comes in handy when you have an app that has a more complex state that is updating frequently. The main benefit is that if states have not changed they will not re-render.

Ultimately it depends on the size of your applications and what kinds of states your components will be using.

Comments

[Leonardo Faria]

Great post! Random question: how did you embed codesandbox in a post?

[Carmen Salas]

When you write a post, there is a link next to the editor to use Liquid tags, if you scroll down the options there are instructions on how to embed codesandbox projects.