reactjs - 在基于 redux 的应用程序中在哪里生成 uid

Question

我正在构建一个 react+redux 应用程序，我很难决定在哪里为我的数据生成 uid。

为了简化事情，我将使用经典的待办事项应用示例来解释我的问题(我的应用比这复杂得多)。

我目前有 addTodo、selectTodos、updateSelectedTodos 和 deleteSelectedTodos 的缩减器

我在调度 addTodo 操作之前在我的 React 组件中生成 uid。

selectTodos 将选中的 uid 存储在状态中。

updateSelectedTodos 和 deleteSelectedTodos 将更新/删除状态为“已选择”列表中的待办事项。

现在我需要添加一个新操作“duplicateSelectedTodo”，但我不确定最好的方法。我需要为重复项生成新的 uid。因为我不能直接在 reducer 中这样做，所以这是我正在考虑的解决方案: - 在我的组件中检索选定的 ID，生成新的 ID 并使用一组新的 ID 发送副本 - 相同但包含待办事项的所有数据(可能是很多数据) - 编写一个“addUid”中间件，它将首先触发并为所有需要一些 uid 的操作生成 uid。

欢迎任何建议:)

ps:像现在这样在组件中生成 uid 对我来说感觉不对...

Answer 1

您应该在创建操作的过程中生成 ID。

如果您手动编写 Action 创建器，则可能是:

const addTodo = (text) => {
  const id = uuid();
  return {type: "todos/addTodo", payload: {text, id}}
}

如果您使用 Redux Toolkit's createSlice API (我会强烈推荐)，它看起来像:

const todosSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: {
      reducer(state, action) {
        state.push(action.payload);
      },
      prepare(text) {
        const id = uuid();
        return { payload: {text, id} };
      }
    }

  }
})