在基于 redux 的应用程序中生成 uid 的位置

Question

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

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

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

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

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

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 的createSliceAPI（我强烈推荐），它看起来像：

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

  }
})