Redux or Context API: Differences between the state managers.
By: Fortune Ikechi
Tags: React, State, Context Api, Front End Development, Redux

Redux or Context API: Differences between the state managers.

Photo by Filiberto Santillán on Unsplash

First I’d recommend you have a basic knowledge of React or any other component based frontend framework. For the last few years, thanks to Dan Abramov, Redux has been the state management solution for “big” React apps, but thanks to the new React update “React 16.3”, which added a new and improved Context API for state management.

Of course, with the release of the Context API, frontend enthusiasts and developers hinted the death of Redux

In this article, i’m going to talk about how the Context API works and the differences between the two state managers.

Note that this post is not aimed to support a particular state manager, in fact i think it depends on the developer’s preference!

first, What is State? State in React is where you store property values that belong to the component. Usually when state object changes, the component re-renders.

Note, for most frontend developers, user-inputs and events are added to state.

REDUX?

Redux is used to manage the state of a React app in a centralized place. Redux can be used on other applications although its particularly popular with React.

Redux works with a single centralized state that is not directly accessible. it also has reducer functions that is used to update global state. in Redux, actions can be used to trigger a function to run.

In Redux, there are a number of actions and action creators example of which is the redux thunk.

export const ADD_PRODUCT = 'ADD_PRODUCT'

export const REMOVE_PRODUCT = 'REMOVE_PRODUCT'



export const addProduct = product => {

return dispatch => {

setTimeout(() => {

dispatch({

type: ADD_PRODUCT,

payload: product,

})

}, 1500)

}

}



export const removeProduct = productId => {

return dispatch => {

setTimeout(() => {

dispatch({

type: REMOVE_PRODUCT,

payload: productId,

})

}, 900)

}

}

You then use your reducer to update your global state.

import { ADD_PRODUCT, REMOVE_PRODUCT } from './actions'



const initialState = {

products: [

{ id: 'p1', title: 'Samsung S10', price: 50},

{ id: 'p2', title: 'Game of thrones 3', price: 24},

// ...

],

cart: [],

}



const shopReducer = (state = initialState, action) => {

switch (action.type) {

case ADD_PRODUCT:

// Shortened! Cart updating logic would be found here

// See the example project linked above

return { ...state, cart: updatedCart }

case REMOVE_PRODUCT:

// Shortened, too!

return { ...state, cart: updatedCart }

default:

return state

}

}

A store is constructed here and passed to a wrapper that is wrapped around a root app component.

// Other imports...

import { createStore, applyMiddleware } from 'redux'

import { Provider } from 'react-redux'

import reduxThunk from 'redux-thunk'



// Other imports...

import shopReducer from './store/reducers'



const store = createStore(shopReducer, applyMiddleware(reduxThunk))



ReactDOM.render(

<Provider store={store}> { } <App />

</Provider>,

document.getElementById('root')

)

This is how Redux works on a React app in a nutshell. Now, lets go to how React’s Context API works…

WHAT IS A CONTEXT API?

As earlier said, React Context API came to solve the problem of how to manage state in a significant React app? How do you handle state which you need in volumes that are not directly connected components?

Of course, a lot of developers will decide to pass props through all the layers of React components.

const Button = props => (

<p className={props.theme.light ? 'btn--grey'> { } Click me

</p>

);



const Form = props => (

<form>

<input type="text" />

<Button theme={props.theme} /> { } </form>

);



const App = props => {

const [theme, setTheme] = useState('grey') ;

// Theme is managed here

return (

<div>

<Form theme={theme} /> { } </div>

)

};

Passing props like the above makes it harder for your components to re-use since they have to handle props that they don’t need (i learnt this the hard way lol).

This is what made Redux popular! it solves that issue and also helps us with routing via JSX.

With React Context API, you pass data through three blocks called the Context Object, Context Provider and Context Consumer.

You can define the Context object in a separate file or component. its also important to note that context is stored data.

Will React Context API replace Redux?

Recently, i asked a senior colleague (who also inspired me write post) this question, and after much consideration this is what i’d say on this.

First, there are a lot of reasons to use Context, some of which are you don’t need a third-party library, which makes for a smaller bundle and improved project and its built into React, making it more straightforward to use once you understand it basics. And hey you don’t need another package to handle asynchronous actions.

But Redux makes for other projects where Context won’t be an option.

P.S this is my first medium post so leave a clap, a comment on where you think i should improve and let me know if you’d like a part 2 containing Hooks and other state technologies.