Estoy mirando redux y agregando nombres a una matriz. El siguiente código funciona (¡más o menos!).
Tengo algunos problemas.
Sé que se recomienda crear un nuevo objeto de árbol de estado cada vez que el estado se pasa a través del reductor, sin embargo, pensé que aún debería funcionar incluso si cambio el objeto de estado que se pasa. En mi código debajo de console.log(store.getState()); funciona si uso var newArr = state.names.concat(action.name); pero no si uso state.names.push(action.name);
Si agrego otro store.dispatch(action) el código no funciona.
store.dispatch({type: 'ADD_NAME',name: 'PhantomTwo'});
¿Alguien puede explicar por qué esto es así?
Aquí está el código que tengo actualmente a continuación.
const initialState = { names: [] } function namesApp(state = initialState, action) { switch(action.type) { case 'ADD_NAME': var newArr = state.names.concat(action.name); return newArr; default: return state; } } let store = createStore(namesApp); store.dispatch({ type: 'ADD_NAME', name: 'Phantom' }); console.log(store.getState()); //returns `["Phantom"]`Este es el comportamiento de la mutabilidad del objeto de array
Dado que React se preocupa mucho por el cambio de estado para volver a renderizar, debemos cuidar la mutabilidad.
El siguiente fragmento explica la mutabilidad de la matriz.
let x = []; let y = x; console.log(x); console.log(y); y.push("First"); console.log(x); console.log(y); let z = [...x]; //creating new reference console.log(z); x.push("Second"); console.log(x); //updated console.log(y); //updated console.log(z); //not updatedEntonces, para una mejor funcionalidad, su reductor será como
function namesApp(state = initialState, action) { switch(action.type) { case 'ADD_NAME': return { ...state, //optional, necessary if state have other data than names ...{ names: [...state.names, action.name] } }; default: return state; } }[].concat devuelve una nueva matriz. Pero tu estado era { name: [] } . A pesar de devolver el objeto recién creado con nuevos nombres, el código anterior devolvió la nueva matriz de nombres.
Solución de vainilla
const initialState = { names: [] }; function namesApp(state = initialState, action) { switch(action.type) { case 'ADD_NAME': var newArr = state.names.concat(action.name); return { ...state, names: newArr }; default: return state; } }ayudante de inmutabilidad
Para este tipo de trabajo usaría immutability-helper
import u from 'immutability-helper'; function namesApp(state = initialState, action) { switch(action.type) { case 'ADD_NAME': return u(state, { names: { $push: action.name } }); default: return state; } } aprende a usar immutability-helper https://facebook.github.io/react/docs/update.html