Encounter issue with async function in produce using Immer

Question

Encounter issue with async function in produce using Immer

Having an issue while attempting to create an asynchronous produce with immer. When calling the async function, this error is encountered:

Below is my code snippet:

import { combineReducers, createStore } from 'redux';
import produce from 'immer';

const mainReducer = produce(async (draft, { type, payload }: { type: string; payload: any }) => {
    switch (type) {
        case 'foo': {
            draft = await myAsyncFn(payload);
        }
    }
});

const reducers = {
    main: mainReducer,
};

const rootReducer = combineReducers(reducers);

export const mainStore = createStore(rootReducer);

The output shows the following error message:

Error: [Immer] produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '[object Promise]'

Question arising - why doesn't it work despite the assumption of its possibility as per this reference link: ?

What does the term

classes that are marked with '[immerable]

entail exactly?

javascript typescript redux react-redux immer.js

Answer 1

Answer №1

Although Immer allows for writing asynchronous logic within the produce function, it is important to note that asynchronous logic should never be included in a Redux reducer.

The error mentioned specifically occurs because Immer is designed to update plain JavaScript objects and arrays by default. To update a class instance or similar data structure, you must include a special immerable symbol in that specific class type.

It is recommended to use Immer with Redux, especially when utilizing the official Redux Toolkit package, which seamlessly integrates Immer into its createSlice API.

Answer 2

Although Immer allows for writing asynchronous logic within the produce function, it is important to note that asynchronous logic should never be included in a Redux reducer.

The error mentioned specifically occurs because Immer is designed to update plain JavaScript objects and arrays by default. To update a class instance or similar data structure, you must include a special immerable symbol in that specific class type.

It is recommended to use Immer with Redux, especially when utilizing the official Redux Toolkit package, which seamlessly integrates Immer into its createSlice API.

Answer 3

Answer №2

While using redux-toolkit, I encountered an error that arose after changing the type of the state to a generic typescript type in the createSlice() method. The error was not present before this modification.

import { AsyncState } from "./AsyncState";

export class SliceState<T> {
  constructor(initialState: T) {
    this.data = initialState;
    this.status = new AsyncState();
  }
  status: AsyncState;
  data: T;
}

The additional error message indicated: [Immer] produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. The current object received: '[object Object]'

Answer 4

While using redux-toolkit, I encountered an error that arose after changing the type of the state to a generic typescript type in the createSlice() method. The error was not present before this modification.

import { AsyncState } from "./AsyncState";

export class SliceState<T> {
  constructor(initialState: T) {
    this.data = initialState;
    this.status = new AsyncState();
  }
  status: AsyncState;
  data: T;
}

The additional error message indicated: [Immer] produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. The current object received: '[object Object]'

Encounter issue with async function in produce using Immer

Answer №1

Answer №2

Similar questions

Javascript code fails to execute properly on IE8

What is the best way to transform an array of lists into a neatly organized state?

Update a single javascript variable on every rotation of the Bootstrap carousel

Angular/Ionic - How can I prevent my function from being called repeatedly while typing in an input field?

Vuejs tutorial: Toggle a collapsible menu based on the active tab status

Why do React components require immutable props when values are passed by value regardless?

The entire DOM refreshes when a user updates the input field

Reveal the MongoDB database connection to different sections within a Next.js 6 application

How to shuffle the elements of an array saved in a JSON file using discord.js

What is the process for activating focus on an input element within a mat-select component?

Setting up multiple base tags in AngularJS for different modules

Next.js Error: The text displayed on the page differs from the HTML rendered by the server

NextJS getStaticProps failing to pass fetched data to the page component

Display the div only when the radio button has been selected

React Native: Issue with the data section in FlatList

In JavaScript, is it possible to dynamically alter and showcase the value of a select tag?

Tips for eliminating repetitive code in JavaScript

Create a new object in Three.js every x seconds and continuously move each object forward in the Z-axis direction

Magento - when the page just can't take it anymore

Troubleshooting an issue with importing a Component in ReactJS using material-ui