How to Update Redux Store in React

This article provides a straightforward guide on how to update the Redux store in a React application. You will learn the core workflow of updating state using modern Redux Toolkit, which involves creating a slice, defining reducers, configuring the store, and dispatching actions from your React components.

Step 1: Define the State and Reducers with a Slice

Modern Redux uses Redux Toolkit’s createSlice function to define the initial state and the reducer functions that specify how the state updates. Each reducer function receives the current state and an action object, and updates the state accordingly.

// features/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Step 2: Configure the Redux Store

Next, you must pass the reducer to the Redux store so that the application can manage the state globally.

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

To make the store accessible to your React components, wrap your root component with the Provider component from the react-redux library:

// index.js or main.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Step 3: Dispatch Actions from Your Component

To update the Redux store from a React component, you need to use two hooks from the react-redux library: * useDispatch: Triggers the reducer actions to update the store. * useSelector: Extracts and reads data from the store.

Here is how you use them in a functional component:

// App.js
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './features/counterSlice';

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  const [amount, setAmount] = useState(5);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Counter: {count}</h1>
      
      {/* Dispatching basic actions */}
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      
      {/* Dispatching action with a payload */}
      <button onClick={() => dispatch(incrementByAmount(amount))}>
        Increment by {amount}
      </button>
    </div>
  );
}

export default App;

Summary of the Update Flow

  1. User Interaction: A user clicks a button in the React component.
  2. Dispatch: The component calls dispatch(action()) using the useDispatch hook.
  3. Reducer Runs: Redux matches the dispatched action to the corresponding reducer function inside the slice.
  4. Store Updates: The reducer updates the state.
  5. UI Re-renders: The useSelector hook detects the state change and automatically re-renders the component with the new data.