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]
135 questions
10
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
- 2,864
- 4
- 21
- 48
10
votes
1 answer
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
- 2,338
- 2
- 14
- 26
8
votes
4 answers
Error: An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft
So, I'm new to redux toolkit.
I have my reducer
const userAuthSlice = createSlice({
name: "userAuth",
initialState: {
token: '',
},
reducers: {
setToken: (state, action) => state.token = action.payload.test,
…
Ivan Solobear
- 95
- 1
- 5
8
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
- 20,205
- 21
- 54
- 94
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
- 81
- 4
6
votes
1 answer
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
- 3,591
- 31
- 63
6
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
- 2,890
- 6
- 37
- 73
5
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
- 213
- 2
- 8
5
votes
0 answers
Using immer.js - reassigning draft array reference results in same array reference in state
I have this failing test using the produce method of immer.js:
it('should replace array reference in state', () => {
let state = {
someArray: [1],
};
const somArrayUpdate = [2, 3];
state =…
alex
- 673
- 9
- 20
4
votes
0 answers
immer property change doesn't trigger update in functional component
I store a Node entity in state. When I click the button, I want to change the property 'title', and trigger component update to display the new title value.
Nothing happens in the function component, it's only updated in class component.
class…
Enivia
- 152
- 1
- 10
4
votes
1 answer
Why immer.js doesn't allow setting dynamic properties on draft?
//I want my action to dispatch payload like
// {type:'update',payload:{'current.contact.mobile':'XXXXXXXXX'}}
//In reducer dynamically select the segment of state update needs to be applied to
//Below code doesn't work as expected though,…
Viky293
- 1,182
- 10
- 18
4
votes
1 answer
How do you debug UI state using Immer?
I have a button that calls handleApplyFiltersButtonClick which updates the state by applying filters to some data. I have a bug somewhere. I'm struggling to debug the state which uses Immers' produce as everything is either a proxy or function. I…
Nick Lee
- 659
- 8
- 20
3
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.wpf
- 13,061
- 31
- 116
- 199
3
votes
1 answer
What is meant by "Data not originating from the state will never be drafted" in immer
I'm confused by this section of the immer docs. I created a simpler example to test the same principle, i.e. to add some new object to the draft data structure and then modify it. Which according to the docs should also modify the original data…
snowape
- 1,124
- 6
- 19
3
votes
0 answers
Type error when saving FormData when using Redux toolkit
I've tried to save FormData(Javascript's standard API) using redux toolkit.
const initialState{
myFile: FormData | null
}
const controllerSlice = createSlice({
name: 'controller',
initialState,
reducers: {
test: (state, action) => ({
…
JillAndMe
- 1,831
- 2
- 14
- 36