js tool to modify immutable object structures (create new structure by modifying existed one)
Provide Internal DSL for immutable structures cloning and modification.
Questions tagged [immer.js]
211 questions
36
votes
7 answers
Error: An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft
I have my reducer
const userAuthSlice = createSlice({
name: "userAuth",
initialState: {
token: '',
},
reducers: {
setToken: (state, action) => state.token = action.payload.test,
},
});
And I have my dispatch…
Ivan Solobear
- 399
- 1
- 3
- 8
23
votes
4 answers
How to debug/log useful information inside immer callback?
I'm using immer in a react app to handle state changes. Let's say the state didn't change as I expected, so I'd want to debug it, but both console.log and debugger gives a Proxy object which doesn't contain any useful information, e.g. what is the…
Stanley Luo
- 3,689
- 5
- 34
- 64
20
votes
2 answers
How can you replace entire state in Redux Toolkit reducer?
EDIT: The solution is to return state after I replace it completely (return state = {...action.payload})! But why? I don't need to return it when I replace the fields individually.
I'm working with the Redux Toolkit, which simplifies some Redux…
Cerulean
- 5,543
- 9
- 59
- 111
14
votes
2 answers
DeepCopy Object in JavaScript using immer
I am using immer to transform react/redux state. Can I also use immer to just deep copy an object without transforming it?
import produce, {nothing} from "immer"
const state = {
hello: "world"
}
produce(state, draft => {})
produce(state,…
Andre
- 4,185
- 5
- 22
- 32
13
votes
2 answers
Use immer `MapSet` plugin with redux toolkit
I have some slices that use Sets in their state. I have this code:
import { configureStore } from '@reduxjs/toolkit';
import { enableMapSet } from 'immer';
import { reducers } from './reducers';
enableMapSet();
export function configureStore() {
…
nrofis
- 8,975
- 14
- 58
- 113
12
votes
2 answers
Can a redux-toolkit createSlice use a js Map as state?
In general, using a mutable object such as Map is strongly discouraged.
However, the magic of immer allows immutable objects to be manipulated as though they are mutable.
Specifically, immer supports immutable versions of Map using enableMapSet
In…
Dusty Phillips
- 123
- 2
- 6
11
votes
1 answer
Fix for vulnerability - "Critical Prototype Pollution in immer" Patched >=9.0.6
Here's a fix for the following vulnerability:
Critical Prototype Pollution in immer
Package immer
Patched in >=9.0.6 …
Juno Sprite
- 569
- 6
- 12
10
votes
1 answer
What's the difference between useState and useImmer?
I have seen some React applications utilize useImmer as a hook instead of useState. I am not understanding what useImmer offers that useState does not.
What is an advantage of using useImmer over using the official useState?
randombits
- 47,058
- 76
- 251
- 433
9
votes
2 answers
Looking for examples to immer produce with the ngrx 8
Looked around the web and can't find an example of using
import produce, {Draft} from "immer";
with the ngrx on()
the closest I can find is:
a non complete solution on:
https://github.com/immerjs/immer/issues/252
import produce, { Draft } from…
born2net
- 24,129
- 22
- 65
- 104
7
votes
2 answers
Type 'MyType' is not assignable to type 'WritableDraft'
I use @reduxjs/toolkit and my state contains: allSlides: ISlide[];
When I try to change anything in allSlides like ex.
setAllSlides(state, action: PayloadAction) {
state.allSlides = action.payload;
},
storeNewSlide(state, action:…
Żywy
- 393
- 2
- 12
7
votes
3 answers
How to update multiple state properties with immer.js
I wonder if it is possible to update multiple properties of state with immer.js in one "call".
Say I have state:
export const initialState = {
isUserLogged: false,
menuIsClosed: false,
mobileMenuIsClosed: true,
dataArray:…
user1665355
- 3,324
- 8
- 44
- 84
6
votes
3 answers
How to dynamically add a new property while updating the draft on immer?
Consider the following code, where line 2 fails with Property 'newProperty' does not exist on type 'WritableDraft'. TS7053
// data is of type MyObject which until now has only a property myNumber
const payload = produce(data, (draft) => {…
stefan.at.kotlin
- 15,347
- 38
- 147
- 270
6
votes
0 answers
How to use immer to value to nested fields which have optional parents, in typescript?
When I have an object which has nested optional fields, like:
type FormState = {
aaa?: {
bbb?: {
ccc?: number
}
}
}
When I want to set value to aaa.bbb.ccc in typescript, I have to:
import produce from "immer";
const formState:…
Freewind
- 193,756
- 157
- 432
- 708
6
votes
2 answers
Why Immer didn't return me a new state even if I modified the draft?
I don't know why even I have modified the draft, immer didn't provide me with a new state, but the old state instance with modified content.
import CartItem from "../../models/cart-item";
import * as actions from "../actions/actionTypes";
import…
Daniel Chan
- 343
- 5
- 13
6
votes
0 answers
Why an array is undefined in state React Redux toolkit
when trying to console.log a piece of (an array) managed with @reduxjs/toolkit it is always either undefined or proxy.
when using import { original } from "immer"; and console.log(original(state.theArrayImTryingToLog));
I simply get: undefined.
when…
oded ivry
- 79
- 5