Step 3: Actions and action creators

Theory

Actions are payloads of information that describe the changes we want to make to the state. Action creators are functions that create actions. They encapsulate the logic of creating actions and can be reused throughout the app.

Practice

In the actions folder, we have a file named counterAction.js. This file is where we define actions and action creators for the counter functionality.

import { createAction } from "@reduxjs/toolkit";

export const increment = createAction("counter/increment");
export const decrement = createAction("counter/decrement");

Code explanation:

• Line 1: Import the createAction function from the @reduxjs/toolkit package. This function simplifies the creation of action creators.
• Line 3: Create the action creator function increment using createAction. This function generates actions for incrementing the counter.
  • The string "counter/increment" provided as an argument represents the action type. It helps identify the action when it is dispatched.
• Line 4: Similarly, create the action creator function decrement using createAction. This function generates actions for decrementing the counter.
  • The string "counter/decrement" represents the action type for decrementing.

By using createAction, these functions generate action objects with a type property set to the specified type string. These actions can be dispatched in Redux reducers or React components to update the Redux store.

Note

Action type strings, such as "counter/increment" and "counter/decrement", should be descriptive and reflect the purpose of the action. It is common to prefix the action type with the feature or slice name for better organization. Using string constants or variables is recommended for consistency and easier refactoring.

Complete code