减速器 - 添加新元素

Question

我有这家店：

const initialActors = {
    list: 'Actor\'s lists',
    actors: [
        {
            name: 'Angelina Jole',
            involved: true
        },
        {
            name: 'Bratt Pitt',
            involved: false
        },
    ]
}

我有一个 reducer 可以向我的商店添加一个新演员：

const actors = (state = initialActors, action) => {
    switch(action.type){
        case 'ADD_NEW':
            return {
                ...state.list,
                actors: [
                    ...state.actors,
                    action.name,
                    action.involved
                ]
            }
        default:
            return state
    }
}

我也有一个动作创建者，但这并不重要。我发送它并显示我的状态：

store.dispatch(addNew({name: "Hello", involved: true}) ); // I have this action creator
console.log(store.getState()

console.log 显示非常困难的对象，其字母如下：{0: "A", 1: "c"}。怎么了？

@编辑 我尝试将 ...state.list 更改为这样的状态列表：

const actors = (state = initialActors, action) => {
    switch(action.type){
        case 'ADD_NEW':
            return {
                state.list,
                actors: [
                    ...state.actors,
                    action.name,
                    action.involved
                ]
            }


        default:
            return state
    }
}

但我有这个错误：

解析错误：意外的令牌，应为“，” 如果我尝试修改演员数组，我会遇到类似的情况：

case 'ADD_NEW':
    return {
        ...state.list,
        actors: [
            ...state.actors,
            {
                action.name,
                action.involved
            }

        ]
    }

错误消息与此相同，但指向操作对象（action.name）。

Answer 1

您所做的只是一个小错误，您需要添加为具有 2 个属性的对象，例如 [...state.actors, { action.name, action.involved }] 而不是您所做的。

来自Spread syntax 的文档：

Spread 语法允许在预期有零个或多个参数（对于函数调用）或元素（对于数组字面量）的地方扩展诸如数组表达式或字符串之类的可迭代对象，或者在需要扩展对象表达式的地方期望零个或多个键值对（用于对象文字）。

像这样：

const actors = (state = initialActors, action) => {
    switch(action.type){
        case 'ADD_NEW':
            return {
                ...state,
                actors: [
                    ...state.actors,
                    {  
                       name: action.name,
                       involved: action.involved
                    }
                ]
            }
        default:
            return state
    }
}

考虑以下几点：

var array = [
  {  
    name: 'someone',
    involved: false,
  }
];

console.log([...array, { name: 'hello', involved: true }]);

我希望这会有所帮助！

Answer 2

state.list 是一个字符串，你正在尝试传播它

let a = 'name'
let c = {...a}
console.log(c)

运行上面的代码sn-p这样你就可以理解了

并且要添加新对象，您需要按如下方式更新减速器

                ...state,
                actors: [
                    ...state.actors,
                    {  
                       name: action.name,
                       involved: action.involved
                    }
                ]

所以上面的代码将传播状态中的所有现有属性，然后你传播所有当前的演员并添加一个新对象，如上所示

更新

因为你是作为

store.dispatch(addNew({name: "Hello", involved: true}) );

这里的payload是一个对象，所以你可以直接使用它

所以在行动中，它将是具有两个道具的对象，一个是

• 类型

• 您发送的有效负载

                  ...state,
                  actors: [
                      ...state.actors,
                      action.payload
                  ]
  

样品工作codesandbox

Answer 3

在你的减速器中，你错误地传播了state.list。因为它是一个字符串，所以你得到了所有的字母。你应该在那里传播state。因为，您想保留 state，而不是 actors 数组。这就是为什么您传播整个state 并保留list（如果有的话，与其他人一起）。

另外，您添加的项目错误，它应该是一个对象。

const actors = (state = initialActors, action) => {
  const { name, involved } = action;

  switch (action.type) {
    case "ADD_NEW":
      return {
        ...state,
        actors: [
          ...state.actors,
          {
            name,
            involved
          }
        ]
      };
    default:
      return state;
  }
};