Redux : toolkit : createAction / createReducer

createAction()

The createAction() function in Redux Toolkit is a helper function that creates an action creator function. An action creator function is a function that returns an action object.

 

The createAction() function takes two arguments: the action type and an optional prepareCallback function. The action type is a string that uniquely identifies the action. The prepareCallback function is an optional function that can be used to prepare the payload of the action.

 

The following is the syntax for using the createAction() function:

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

const incrementAction = createAction('increment');

The incrementAction action has the action type increment. The prepareCallback function is not used in this example.

The createAction() function also returns an object that has the following properties:

• type: The action type.
• payload: The payload of the action.
• meta: Any additional metadata about the action.
• error: An error object if the action failed.

The type property is always present, and it is the only required property. The payload property is optional, and it can be used to store data that is associated with the action. The meta property is also optional, and it can be used to store additional metadata about the action. The error property is only present if the action failed.

 

Here is an example of how to use the createAction() function with a prepareCallback function:

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

const incrementAction = createAction('increment', (payload) => {
  return {
    type: 'increment',
    payload: payload + 1,
  };
});

In this example, the prepareCallback function is used to increment the value of the payload before it is returned.

 

The createAction() function is a very useful tool for creating action creators in Redux Toolkit. It makes it easy to create actions that have the correct properties and that can be used to update the state of your application.

 

createReducer()

The createReducer() function in Redux Toolkit is a helper function that creates a reducer function. A reducer function is a function that takes the current state and an action as its arguments, and returns the new state.

 

The createReducer() function takes an object of reducer functions as its argument. The reducer functions are responsible for updating the state of your application in response to actions.

 

The following is the syntax for using the createReducer() function:

import {
  createAction,
  createReducer,
  AnyAction,
  PayloadAction,
} from '@reduxjs/toolkit'

const increment = createAction<number>('increment')
const decrement = createAction<number>('decrement')

function isActionWithNumberPayload(
  action: AnyAction
): action is PayloadAction<number> {
  return typeof action.payload === 'number'
}

const reducer = createReducer(
  {
    counter: 0,
    sumOfNumberPayloads: 0,
    unhandledActions: 0,
  },
  (builder) => {
    builder
      .addCase(increment, (state, action) => {
        // action is inferred correctly here
        state.counter += action.payload
      })
      // You can chain calls, or have separate `builder.addCase()` lines each time
      .addCase(decrement, (state, action) => {
        state.counter -= action.payload
      })
      // You can apply a "matcher function" to incoming actions
      .addMatcher(isActionWithNumberPayload, (state, action) => {})
      // and provide a default case if no other handlers matched
      .addDefaultCase((state, action) => {})
  }
)

https://redux-toolkit.js.org/api/createreducer

createReducer | Redux Toolkit