Question: Always need to clone a state property in reducer?

Hello again,

given follwing example:

// state has property 'list' which is an array().

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_LIST_ITEM':
      state.list.push('new item');
      return Object.assign({}, state, { list: state.list });
  }
};

Using this, a polymer element property bound by “statePath: ‘list’” doesn’t recognize the change of state.list.

When doing the following, everything works like desired:

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_LIST_ITEM':
      var tmp = state.list.splice(0);
      tmp .push('new item');
      return Object.assign({}, state, { list: tmp });
  }
};

So does this mean, I’ve to copy/clone every property of the state in the reducer before changing it?

Regards, Michael

[tur-nr]

No worries.

If you have any questions, get me on slack rather than raise issues. Unless it’s an issue of course 😉

https://polymer.slack.com

[tur-nr]

You don’t have to use this “pattern”. Google wrote their own unidirectional, UniFlow with achieves the same goal just with a different state manager.

Whatever you use, unidirectional is the way forward. Always push your values down and use Mediators correctly. By correctly, I mean using readOnly on the properties that push state upwards.