reactjs Redux Toolkit生成并返回一个id(从操作返回数据)

6ss1mwsb 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(163)

我试图创建一个对象并将其添加到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} };
      }
    }
  }
})

然而，假设我想在创建todo之后使用/引用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

来源：https://stackoverflow.com/questions/71446347/redux-toolkit-generate-and-return-an-id-return-data-from-action

2条答案

按热度按时间

raogr8fs1#

令人遗憾的是，dispatch不是这样工作的。普通Redux dispatch调用返回一个已调度的动作，但redux-toolkit默认使用thunk中间件，它更改dispatch返回值，以承诺用已调度的动作填充。你不能从dispatch调用本身得到调度结果，这是不可能的，并且与它的本质相冲突。
但是，您可以创建一个基于承诺结果调度不同操作的形实转换。有关创建具有副作用的形实转换的信息，请查看官方文档。有关更高级的用法，请查看SO中的this answer。
如果您使用的是redux-toolkit，则可以使用createAsyncThunk，它实现了相同的逻辑，但没有更多的样板代码。

赞(0）回复(0）举报 2022-12-12

6kkfgxo02#

在这种情况下没有公认的模式。有时你必须根据你的需要弄清楚事情。这就是为什么leetcode算法在招聘过程中如此重要。
如果您遵循上述实现

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

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

获取“id”的唯一方法是使用useSelector获取state，然后循环遍历where text===currentToDo。对于一个简单的任务来说，这太麻烦了。
相反，为什么不在调度中传递id呢？您可以将有效负载安排在接受一个对象的位置。（因为您不能传递多个参数）

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

在这种情况下，您甚至不需要prepare阶段。（您在之前也不需要）。只需将payload对象推入数组

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs Redux Toolkit生成并返回一个id(从操作返回数据)

2条答案

相关问题

热门标签

最新问答