Reducer - 添加新元素

Question

我有这家店：

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

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

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

但是我有这个错误：

Parsing error: Unexpected token, expected "," Similiar situation I have if I tryed modify actors array:

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 syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

像这样：

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)

运行上面的代码片断你就能看懂

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

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

所以上面的代码将展开状态中的所有现有属性，然后展开所有当前的 actor 并添加一个新对象，如上所示

更新

因为你是

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

这里的有效载荷是一个对象，所以你可以直接使用那个

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

类型

您发送的负载

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

Reducer - 添加新元素

Reducer - add new element

javascript

store

reactjs

redux