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

Question

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

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

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

这是我显示数据的 reducer 。

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 值从数组更改为对象。

---

让我们考虑您的 person 对象值如下，您发送它:

{
  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' }];