Uso del operador spread de es6 en la aplicación react-redux con el cargador de la etapa 2

Question

Estoy usando el operador de propagación ES6 en mi aplicación react-redux de esta manera

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
    };

El problema es cada vez que obtengo datos nuevos de action.payload.data.result asignados a los elementos. Quiero tener datos concatenados del estado anterior. Alguien puede ayudar.

reactjs ecmascript-6 redux react-redux

0

h_h 23 mar. 2017 a las 17:15

Answer 1

Esto debería funcionar.

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

2

Rafael Berro 23 mar. 2017 a las 14:31

Answer 2

Entonces, lo que realmente necesita hacer aquí es concatenar los elementos existentes y los que devuelve su carga útil.

Suponiendo que este sea el caso, debe crear una nueva matriz a partir de la matriz de elementos antiguos y nueva. También desea evitar la mutación del estado existente.

Devuelve un estado completamente nuevo de tu reductor. Haga esto clonando el estado existente y agregando su nueva matriz de elementos:

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;

Hay formas más limpias de hacer esto con la sintaxis extendida o las bibliotecas, como inmutable, pero este ejemplo logrará explícitamente lo que tenemos que hacer.

1

hairmot 5 abr. 2017 a las 13:03

Uso del operador spread de es6 en la aplicación react-redux con el cargador de la etapa 2

2 respuestas

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

reactjs