What is Redux ?

Redux is a predictable state container for javascript apps.

Redux DevTools

Redux Devtools help debugging application’s state changes. It provides state chart, state action history logs.

It generates test code for following test libraries:

• Jest
• Mocha
• Tape
• Ava

Redux toolkit

Redux toolkit simplifies the general structure of redux. The redux core setup can contain lot of boilerplate code .redux toolkit helps developers to simplify and reduce boilerplate code so we can focus on the general logic of our application.

How to setup redux in React application ?

Take the following stepts to setup redux in your react application:

1- Install necessary packages

yarn add @reduxjs/toolkit react-redux

2- Create store

import { configureStore } from '@reduxjs/toolkit'
import productReducer from './slice'

export const store = configureStore({
  reducer: {
    product: productReducer,
  },
})

This is the redux store of state. The configureStore method creates redux store and configures the Redux DevTools extension. And as you can see you can insert multiple reducers.

3 - Provide the Redux Store to state

import { Provider } from 'react-redux'
import { store } from './store'
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

We pass the redux store to Provider. This Provider makes the state available to all react components so they can make operations like mutation or accessing.

4- Create Redux State Slice

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  products: [
    {
      price: '10$',
      name: 'test',
      stock: 0,
    },
  ],
  added: false,
}

export const ProductSlice = createSlice({
  name: 'product',
  initialState,
  reducers: {
    toggleAdded: (state) => {
      state.added = !state.added
    },
    addProduct: (state, action) => {
      state.products = [...state.products, action.payload]
    },
  },
})

export const { toggleAdded, addProduct } = ProductSlice.actions
export default ProductSlice.reducer

The createSlice method takes the following parameters:

• name of slice
• initial state
• reducers

A reducer is a pure function for handling state change.

As you can see we define our state logic using redux slice.

5 - useSelector and useDispatch to access and mutate the state

const state = useSelector((state) => state.product)
const dispatch = useDispatch()
function HandleClick() {
  return dispatch(toggleAdded())
}
return (
  <div>
    <p>Added: {state.added.toString()}</p>
    <button onClick={() => HandleClick()}>Toggle Added</button>
  </div>
)

The useSelector method reads the data from store.

We use useDispatch method to call reducer actions.

Resources:

• redux-in-100-seconds
• redux
• redux-toolkit
• redux-devtools