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

Question

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

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

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

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

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

updateSelectedTodos 和 deleteSelectedTodos 将update/delete "selected" 列表中列出的 todos 状态。

现在我需要添加一个新操作 "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} };
      }
    }

  }
})

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

where to generate uid in a redux based app

uuid

reactjs

redux