Redux Toolkit -从我们的Redux存储中的API捕获数据的最佳方法?

Question

这几天我一直在想这个问题。从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])

这样行吗?还是有更好的方法?

?

Answer 1

肯定有更好的方法。你目前的方法是不可扩展的。解决您的问题是创建选择器(*.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

希望这能回答你的问题。

一些有用链接:

1. createSelector
2. idiomatic-redux-using-reselect-selectors
3. redux-reducers-selectors

感谢

Answer 2

所有这些都在官方的Redux教程中有介绍。

这个特定的问题在第6章中有涉及-你可以用entityAdapter来做这个，它会给你帮助来管理entities集合，也会自动创建选择器。
但总的来说，我建议你阅读全文——如果你问这个问题，你可能也错过了其他功能。