What is Redux Toolkit?

Why use Redux in React?

Reason:

It is easy when handling state within a single component, but when state is being used in different components, we need to declare a global state, which is Redux.

There are some common words used in Redux which are state, action, reducer, store and dispatch [1].

1. State

   • Stores the information about a component

   • For example: Component named “Counter”, its count value can be saved in a global state that can be accessed anywhere.

2. Action

   • UI trigger event such as clicked a button

   • Action is an object with key “type”, provides a descriptive name, and key “payload”, provides additional information describing the action.

3. Reducer

   • A function that accepts the current state and an action then returns an updated state value

   • Define the logic to process the state based on the action type

   • For example: increase the state value by 1 for increment action

4. Store

   • Store contain the current state value

5. Dispatch

   • store.dispatch(actionObj_name) is usually used to update the state by passing a specific action name

Below are the code demonstration for Redux

Step 1:

By using the code below, all the child of App.js can access the state from store.

// src/main.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { App } from './App'
import createStore from './createReduxStore'

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

Step 2:

Define actions

// actions.js

// This file defines "action creators".
// Action creators are functions that create "action" objects to be sent to the Redux store.

// Define action types as constants to avoid typos
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

// Action creator for increment
export function increment() {
  return { type: INCREMENT };
}

// Action creator for decrement
export function decrement() {
  return { type: DECREMENT };
}

Step 3:

Define reducer

// reducer.js

// Import the action types
import { INCREMENT, DECREMENT } from './actions';

// This is the initial state of our Redux store
const initialState = {
  count: 0
};

// The reducer is a pure function that receives the current state and an action.
// It returns a new state based on the action type.
export function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      // ...state copy everything from old state, then overwrite count property
      return { ...state, count: state.count + 1 }; // Increase the count by 1
    case DECREMENT:
      return { ...state, count: state.count - 1 }; // Decrease the count by 1
    default:
      return state; // Return the unchanged state if action is unknown
  }
}

Step 4:

Pass reducer created in step 3 to store

// store.js

// Import the createStore function from Redux
import { createStore } from 'redux';

// Import our reducer
import { counterReducer } from './reducer';

// Create the Redux store using our reducer
const store = createStore(counterReducer);

// Export the store so it can be used elsewhere
export default store;

Step 5:

Use the action to update the count value (state) by passing the action defined at step 2 inside the dispatch function

// index.jsx

// Import our Redux store
import store from './store';

// Import the action creators
import { increment, decrement } from './actions';

// Dispatch some actions
store.dispatch(increment()); // Should print count: 1
store.dispatch(increment()); // Should print count: 2
store.dispatch(decrement()); // Should print count: 1

Reference

[1] “Redux Essentials, Part 1: Redux Overview and Concepts.“ Redux. https://redux.js.org/tutorials/essentials/part-1-overview-concepts (accessed Apr 27, 2025)