Redux Toolkit -从Redux存储中的API捕获数据的最佳方式？

wsewodh2 于 2022-11-24 发布在其他

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

在过去的几天里，我一直在想这个问题。从我们的redux存储中的API捕获数据的最好方法是什么？我正在使用redux工具包。
例如，以下代码为-

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(authUser.pending, state => {
        state.loading = 'pending';
      })
      .addCase(authUser.fulfilled, (state: LoginState, action: PayloadAction<Data>) => {
        state.loading = 'succeeded';
        state.entities.push(action.payload);
      })
  },
});

就像我创建了一个数组entities，并将所有数据推入其中。如果我必须访问react组件中的这些数据，它看起来像这样-
const role = useSelector((state: RootState) => state?.user?.entities[0]?.roles[0])
这是好的还是有更好的方法？

redux

来源：https://stackoverflow.com/questions/74470130/redux-toolkit-best-way-to-capture-data-from-api-in-our-redux-store

2条答案

按热度按时间

cetgtptt1#

当然，有一个更好的方法。你目前的方法是不可伸缩的。解决你的问题是创建选择器（*.selectors.ts）文件。
对于上面的代码示例，创建如下选择器文件：user.selectors.ts：

import { createSelector } from "@reduxjs/toolkit";

const selectAllUsers = (state) => state.entities;

const selectUserById = (userId) =>
  createSelector(selectAllUsers, (state) =>
    state.find((user) => user.id === userId)
  );

若要在元件档案中使用相同的：

const allUsers = useSelector(selectAllUsers); // all users
const selctedUser = useSelector(selectUserById(9)); // user by id

希望这能回答你的问题。
一些有用的链接：

赞(0）回复(0）举报 2022-11-24

q3aa05252#

所有这些都在official Redux Tutorial中介绍。
这个特定的问题在chapter 6中有介绍--您可以使用entityAdapter来完成此操作，它将给予您提供管理该entities集合的助手，还将为您的自动创建选择器。
但一般来说，我会建议你阅读整个事情-你可能错过了其他功能太如果你问这个问题。

赞(0）回复(0）举报 2022-11-24

我来回答

Redux Toolkit -从Redux存储中的API捕获数据的最佳方式？

2条答案

相关问题

热门标签

最新问答