Immer: Using Destructuring failure

[yuanalexwu]

const baseState = {
  foo: 'aaaa',
  bar: 'bbbb',
}
const updateData = {
  bar: 'cccc',
}
const newState = produce(baseState, draft => {
  draft = { ...draft, ...updateData }
})
console.log(newState)
// newState {foo: 'aaaa', ar: 'bbbb'}

the newState doesn't change

[mweststrate]

The problem is that you are reassigning draft, which doesn't modify the
original draft but just creates a local variable which is further not used
anywhere. You can use Object.assign(draft, updateData) though

Op za 10 feb. 2018 09:46 schreef sam [e-mail]:

const baseState = {
foo: 'aaaa',
bar: 'bbbb',
}const updateData = {
bar: 'cccc',
}const newState = produce(baseState, draft => {
draft = { ...draft, ...updateData }
})console.log(newState)// newState {foo: 'aaaa', ar: 'bbbb'}

the newState doesn't change

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mweststrate/immer/issues/94, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhG0uV90stI_lcDUQ6Ovb8JczWgZ5ks5tTVdogaJpZM4SA27c
.

[yuanalexwu]

Thx for ur reply
I just a little bit lazy, normally we should update like below:

const baseState = {
  foo: 'aaaa',
  bar: 'bbbb',
}
const updateData = {
  bar: 'cccc',
}
const newState = produce(baseState, draft => {
  draft.bar = updateData.bar //  <---------------- mark
})

The line I marked update a single property. What if I got many properties to be updated
It must be assigned one by one

[benbraou]

@yuanalexwu you can use Object.assign as suggested by @mweststrate
Object.assign(draft, updateData) will mutate draft by copying the enumerable properties from updateData.
Checkout this example:

const base = {a: 1, b: 2, c: 3, d: 4};
const obj = new Proxy(base, {
    set: function(obj, prop, value) {
        console.log(`current property: ${prop}`);
        obj[prop] = value;
        return true;
    }
})
const update = {a: 11, b: 22, c: 33, d: 44};
Object.assign(obj, update);

The following will be logged into console:

current property: a
current property: b
current property: c
current property: d

Also, please note thatdraft is a proxy on the baseState. Immer definesProxy traps that will be used to build the new state based on the mutation you make on thedraft

[Grsmto]

Hey guys,
Sorry to pop on this issue but I'm not sure I'm facing a bug or I just don't understand how Immer works.
It seems like once we use Object.assign like suggested in #issuecomment-364646429 I got a read only error. You can find an example on the following codesandbox https://codesandbox.io/s/mzx4w93wx9 .

Does anyone has an idea if I'm doing something wrong there or if it's a bug?
Thanks!

Edit: Ok I think I understand: it's because I'm merging a deeply nested object so it still got the reference to the nested theme object after assigning and somehow it breaks. So that trick of using Object.assign would work only if you have a flat object I guess.
So using Lodash.merge solves the issue but it's probably not a good idea to do that at all anyway 😅

[mweststrate]

Please avoid commenting on closed issues, rather open new one referring to
this

Op ma 28 mei 2018 18:49 schreef Adrien Denat [e-mail]:

Hey guys,
Sorry to pop on this issue but I'm not sure I'm facing a bug or I just
don't understand how Immer works.
It seems like once we use Object.assign like suggested in

issuecomment-364646429 I got a read only error. You can find an example

on the following codesandbox https://codesandbox.io/s/mzx4w93wx9 .

Does anyone has an idea if I'm doing something wrong there or if it's a
bug?
Thanks!

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mweststrate/immer/issues/94#issuecomment-392569221,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhF09FhCjUr15L69pv3qqgU5xMDyfks5t3CqOgaJpZM4SA27c
.