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

Developing an npm console application that is "installable" similar to tools like yeoman, gulp, or grunt

How to transfer data between components in Angular 6 using a service

What's the best way to transfer a variable from a PHP file to a jQuery AJAX file so that it can be used as the URL parameter when sending

Integrate retrieved JSON data using Ajax into D3 visualizations

There seems to be an issue with the type error regarding the return of the mysql2/promise

Error: Unable to assign values to undefined properties (specifically 'styles') when using withLess, withSass, or withCSS in next.config.js within Next.js

jQuery tipsy not triggering click event in Internet Explorer

External Submit button malfunctioning when attempting to submit two distinct forms

What are the best practices for running node in VSCode?

Refresh a selection menu using a checkmark

The isotope plugin import failed, displaying the error message "The function $(container).isotope does not exist."

Issue 2339: Dealing with || and Union Types

Tips for returning an element to its starting position following animation

Accessing the locally stored data and displaying it in ng-bind

Display only specific PHP-encoded JSON data in a formatted table

Emulate the selection process using element-ui and vue-test-utils

Would you be able to clarify why the run() function is giving me an error when I try to return {1,3}, but it works fine when I return {a,b} in

Challenges with incrementing in Jquery's each loop and setTimeout

Exploring the method to deactivate and verify a checkbox by searching within an array of values in my TypeScript file

React function components will trigger a re-render when there is any change