Redux reducer is not updating the immutable.js Redux store

Question

I can't seem to modify the immutable.js record which is the redux store for my app.

let makeVepo: RecordFactory<any> = Record({
  product: new makeProduct(),
  menu: new makeMenu(),
  formControls: new makeFormControls(),
  some: 10
})

export const vepo = new makeVepo()

vepo.set('some', 200)

vepo.some does not update to 200, it stays 10

My redux store will not update from a reducer.

It should work. When I put a breakpoint here:

Here I am manipulating the state in the console, and it does not persist:

Answer 1

You are trying to mutate an immutable object. When you do vepo.set('some', 200), it does not modify vepo, it returns a new object with the value you assigned.

You can try this:

const { Record } = require('immutable');

const makeVepo = Record({
  product: 'function',
  menu: 'function',
  formControls: 'function',
  some: 10
})

const vepo = new makeVepo()

const newObject = vepo.set('some', 200)
console.log(vepo.toJS()) // `some` is still 10
console.log(newObject.toJS()) // `some` is 200

Try that out at npm runkit or in your local environment. The new object contains the updated value.

Note: I adapted the code so it can run in isolation.