Blog>
Snippets

Resolving Issues with Action Creator Signature Changes

Adjust action creators to match the new signature requirements introduced in Redux v5.0.0.
import { createAction } from '@reduxjs/toolkit';

// Old action creator signature
// function addTodo(text) {
//   return {
//     type: 'ADD_TODO',
//     text
//   };
// }

// New action creator with createAction utility
const addTodo = createAction('ADD_TODO', function prepare(text) {
  return {
    payload: {
      text,
      completed: false
    }
  };
});

// Using the new action creator
store.dispatch(addTodo('Learn Redux v5.0.0'));
This code demonstrates how to rewrite an old Redux action creator to use the new `createAction` utility function provided by Redux Toolkit in accordance with the signature changes in Redux v5.0.0. The `createAction` function abstracts away the manual action creation and allows for a prepare callback to format the payload as needed.
// Dispatching an action using the new signature
store.dispatch(addTodo.prepare({ text: 'Finish homework' }).action);
This code illustrates how to dispatch an action using the new `.prepare` notation that allows for pre-processing or formatting of the payload before the action is dispatched with the new action creator signature.