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

Question

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

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

我目前有 addTodo、selectTodos、updateSelectedTodos 和 deleteSelectedTodos 的 reducer

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

selectTodos 将选中的 uid 存储在 state 中。

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

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

欢迎任何建议:)

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

Answer 1

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

如果您是手动编写动作创建器，可能是：

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

  }
})