React redux - 在状态树对象中向数组添加多个项目的问题

Question

我正在寻找redux并为数组添加名称。下面的代码有效（有点！）。

我有几个问题。

1. 我知道每次状态通过reducer时都建议创建一个新的状态树对象，但是我认为即使我改变了传入的状态对象它仍然可以工作。在我的代码下面console.log(store.getState());工作如果我使用var newArr = state.names.concat(action.name);但不是如果我使用state.names.push(action.name);
2. 如果我添加另一个store.dispatch(action)代码不起作用。 store.dispatch({type: 'ADD_NAME',name: 'PhantomTwo'});

任何人都可以解释为什么会这样吗？

3. 最后，我是否需要在switch语句之外再次返回状态？

这是我目前在下面的代码。

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"]`

Answer 1

[].concat返回一个新数组。但你的州是{ name: [] }。尽管使用新名称返回新构建对象，但上面的代码返回了新名称数组。

香草溶液

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

不变性辅助

对于这种类型的工作，我会使用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;
    }
}

学习如何使用immutability-helper https://facebook.github.io/react/docs/update.html

Answer 2

这是array对象可变性的行为

由于React高度关注重新渲染的状态变化，因此我们需要注意可变性。

下面的代码解释了数组的可变性。

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 updated

因此，为了更好的功能，您的减速机就像

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