Question

在我的应用程序中，我正在显示人员数据。我有一个可以输入新人的场景。到目前为止，我有这个：减速器：

export default function (state = [], action) {
    console.log("Reducing");
    switch (action.type) {
        case 'ADD':
            console.log("ADDING!");
            return action.payload;
            break;
    }
    return state;
}

动作：

export const addPerson = (person) => {
    console.log("addPerson Action Fired! ", person);
    return {
        type: 'ADD',
        payload: person
    }
};

我有一个减少器，其中包含我在我的应用程序中显示的少数人数据，但我在此时被阻止添加新人。到目前为止，我可以在控制台日志中看到我的输入，但无法弄清楚如何将其添加到状态。非常感谢帮助。

这是我在显示来自的数据的缩减器。

export default function () {
    return ["abc","def","ghi","jkl"]
}

现在我在数组中显示这些元素的列表（每个人都是一个人）。当我添加一个时，它将与这些人一起添加并显示更新列表。

Answer 1

您应该在reducer中执行以下操作：

export default function (state = [], action) {
    console.log("Reducing");
    switch (action.type) {
      case 'ADD':
        return [
          ...state,
          action.payload,
        ]
    }
    return state;
}

通过这种方式，您可以将此人添加到现有阵列中。否则，您将当前state值从数组更改为对象。

让我们考虑您的人物对象值如下，然后发送它：

{
  type: 'ADD',
  payload: {
    id: 1,
    name: 'John Doe',
  }
}

使用之前的代码，您将拥有当前值：

// First step
return action.payload;

// Second step
return { id: 1, name: 'John Doe' };

使用更正的代码：

// First step
return [
  ...state,
  action.payload,
]

// Second step
return [
  ...[],
  { id: 1, name: 'John Doe' },
]

// Third step
return [{ id: 1, name: 'John Doe' }];

使用输入更新reactjs中的redux状态

1 个答案: