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

我正在研究redux并将名称添加到数组中。下面的代码可以工作（有点！）

我有几个问题

我知道建议在每次状态通过reducer时创建一个新的状态树对象，但是我认为即使我更改传入的状态对象，它仍然应该工作。 在

console.log（store.getState（））下面的我的代码中var newArr=state.names.concat（action.name），则code>可以工作但如果我使用
state.names.push（action.name），则不能使用

如果我添加另一个

store.dispatch（action）

代码将不起作用

store.dispatch（{type:'ADD_NAME'，NAME:'PhantomTwo'}）

有人能解释为什么会这样吗

最后，我是否需要在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"]`

---

[].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;
    }
}

不变性助手

对于这种类型的工作，我将使用

不变性助手

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

---

了解如何使用

不变性助手

这是

数组

对象可变性的行为

由于

React

高度关注重新渲染的状态更改，因此我们需要考虑可变性

下面的代码片段解释了数组的易变性

设x=[]；
设y=x；
控制台日志（x）；
控制台日志（y）；
y、 推动（“第一”）；
控制台日志（x）；
控制台日志（y）；
设z=[…x]//创建新引用
控制台日志（z）；
x、 推（“第二”）；
控制台日志（x）//更新
控制台日志（y）//更新
控制台日志（z）//未更新

我认为原因是前几行的文字有误。我不知道如何在不覆盖前几行的情况下，动态地保持每个更改的状态。成功了，谢谢！