Redux Toolkit 生成并返回一个 id（从 action 返回数据）答案

【问题标题】：Redux Toolkit generate and return an id (return data from action)Redux Toolkit 生成并返回一个 id（从 action 返回数据）
【发布时间】：2022-12-10 11:26:18
【问题描述】：

我正在尝试创建一个对象并将其添加到 reducer，但让 action/reducer 负责生成 id。

根据这个answer，似乎接受的模式是在动作创建者中生成 id：

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

但是，假设我想在创建待办事项后使用/引用 id，比如

dispatch(addTodo('Say hello world')) // creates a todo with a uuid
...
id = <some way to get the id>
doSomethingElseWithTodoGivenId()

Redux-Toolkit 是否为实现这一目标提供任何帮助？我查看了createAsyncThunk，但它似乎更关注异步数据获取状态。

我知道我可以用 redux-thunk 做到这一点（通过等待调度并让 thunk 操作生成 id）：

const id = await dispatch(createTodoWithGeneratedId('Say hello world'))

或者让调用者生成 id。但我想知道是否有更好的方法。

【问题讨论】：

标签： reactjs redux redux-toolkit

【解决方案1】：

不幸的是，dispatch 不是那样工作的。 Plain Redux dispatch 调用 retuns a dispatched action，但 redux-toolkit 默认使用 thunk 中间件，它更改 dispatch 返回值以承诺通过分派操作完成归档。您无法从 dispatch 调用本身获得调度结果，这是不可能的，并且与其性质冲突。

但是，您可以创建一个基于 promise 结果分派不同操作的 thunk。查看有关creating thunk with side effects 的官方文档。有关更高级的用法，请在 SO 中查看 this answer。

如果你使用redux-toolkit，你可以使用createAsyncThunk，它实现了相同的逻辑，但没有更多的样板代码。

【讨论】：

imo 这个现实是 RTK 对我失败的地方。我最初喜欢通过 thunk 副作用处理 api 请求，这增加了响应中间件的一致性（比如处理授权错误）但有时我想发出 api 请求并将这些值返回到组件状态...现在我必须编写一个单独的控制器来处理这些网络请求错误

【解决方案2】：

在这种情况下没有可接受的模式。有时您必须根据自己的需要弄清楚事情。这就是为什么 leetcode 算法在招聘过程中如此重要。

如果您按照上述实施

  import { nanoid } from '@reduxjs/toolkit';

  prepare(text) {
    const id = nanoid();
    return { payload: {text, id} };
  }

获取“id”的唯一方法是您必须使用 useSelector 获取状态，然后循环遍历 text===currentToDo。这对于一个简单的任务来说工作量太大了。

相反，为什么不通过调度传递 id？您将有效负载安排在接受对象的位置。（因为你不能传递多个参数）

const id=nanoid()
dispatch(addTodo({todo:'Say hello world',id:id}))
// now use that id todo something

在这种情况下，您甚至不需要 prepare 阶段。（你之前都没有）。只需将有效负载对象推送到数组

【讨论】：