Using spread operator from es6 in react-redux app with stage-2 loader

Question

I am using ES6 spread operator in my react-redux app like this way

var defaultState = {val:1, items:[]};
export default function(state=defaultState, action){
  switch(action.type){
    case 'ADD_BOOK':
    state.val = 0;
    return {
      ...state,
      items:action.payload.data.result
    };

The problem is each time I get fresh data from action.payload.data.result assigned to items. I want to have concatenated data from previous state. Can someone help.

````return { ...state, items: [ ...state.items, ...action.payload.data.result ] }```` should work. — Rafael Berro, Mar 23 '17 at 14:30
`{ ...state, items: state.items.concat(action.payload.data.result)` — Alfred Crosby, Mar 23 '17 at 15:01
It seems that he is using the plugin "transform-object-rest-spread" or something like that. — Rafael Berro, Mar 23 '17 at 15:04
[`...` is not an operator](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508)! — Felix Kling, Mar 23 '17 at 20:19

score 2 · Accepted Answer · answered Mar 23 '17 at 14:31

2

This should work.

return {
  ...state,
  items: [
    ...state.items,
    ...aciton.payload.data.result
  ]
}

answered Mar 23 '17 at 14:31

Rafael Berro

2,518
1
17
24

hairmot · Answer 2 · 2017-04-05T13:03:54.160

so what you really need to do here, is concat the existing items and those returned from your payload.

Assuming this is the case, then you need to create a new array from the old items array and new. You also want to avoid mutating the existing state.

Return a completely new state from your reducer. Do this by cloning the existing state and adding your new items array:

case 'ADD_BOOK':
    var newState = Object.assign({}, state, {val:0}); // clones the existing state and adds our new val
    newState.items = newState.Items.concat(action.payload.data.result);
    return newState;

There are cleaner ways to do this with the spread syntax or libraries such as immutable but this example will explicitly achieve what we need to do.

Using spread operator from es6 in react-redux app with stage-2 loader

2 Answers2