javascript - Param Redux 数据未正确填充到存储中
问题描述
在我通过 Thunk 操作传递参数的情况下,我的 Redux 商店有问题。如果没有参数,我的商店会正确填充。该操作已成功完成,我可以看到数据已通过我的操作的成功/已完成消息返回到前端,但没有迹象表明它作为状态进入商店。
我之前有一个实例,其中数组列表从后端错误地命名,但这次不是这种情况。
有什么可以说明为什么我的商店没有填充状态数据?
行动
export const requireUserDiveLogData = createAsyncThunk(
'users/requireData', // action name
// action expects to be called with the name of the field
async (userId) => {
// you need to define a function to fetch the data by field name
const response = await userDiveLogList(userId);
// what we return will be the action payload
return response.data;
},
// only fetch when needed: https://redux-toolkit.js.org/api/createAsyncThunk#canceling-before-execution
{
// _ denotes variables that aren't used - the first argument is the args of the action creator
condition: (_, { getState }) => {
const { users } = getState(); // returns redux state
// check if there is already data by looking at the didLoadData property
if (users.didLoadDiveLogData) {
// return false to cancel execution
return false;
}
}
}
)
减速器
export const userSlice = createSlice({
name: 'users',
initialState: {
userDiveLogList: [],
didLoadDiveLogData: false,
},
reducers: {
[requireUserDiveLogData.pending.type]: (state) => {
state.didLoadDiveLogData = true;
},
[requireUserDiveLogData.fulfilled.type]: (state, action) => {
return {
...state,
...action.payload
}
},
}
})
解决方案
您应该使用extraReducers而不是reducer来处理由createAsyncThunk
和createAction
函数产生的动作。
此外,Redux Toolkit 的createReducer
内部createSlice
自动使用Immer让您可以使用“mutating”语法编写更简单的不可变更新逻辑。你不需要自己做浅拷贝工作。
例如
// @ts-nocheck
import {
configureStore,
createAsyncThunk,
createSlice,
} from '@reduxjs/toolkit';
async function userDiveLogList(userId) {
return { data: { userDiveLogList: [1, 2, 3] } };
}
export const requireUserDiveLogData = createAsyncThunk(
'users/requireData',
async (userId) => {
const response = await userDiveLogList(userId);
return response.data;
},
{
condition: (_, { getState }) => {
const { users } = getState();
if (users.didLoadDiveLogData) {
return false;
}
},
}
);
const userSlice = createSlice({
name: 'users',
initialState: {
userDiveLogList: [],
didLoadDiveLogData: false,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(requireUserDiveLogData.pending, (state) => {
state.didLoadDiveLogData = true;
})
.addCase(requireUserDiveLogData.fulfilled, (state, action) => {
state.userDiveLogList = action.payload.userDiveLogList;
});
},
});
const store = configureStore({
reducer: {
users: userSlice.reducer,
},
});
store.dispatch(requireUserDiveLogData()).then(() => {
console.log(JSON.stringify(store.getState(), null, 2));
});
控制台中的输出:
{
"users": {
"userDiveLogList": [
1,
2,
3
],
"didLoadDiveLogData": true
}
}
推荐阅读
- ruby-on-rails - 在 Rails 6 中排序 hstore 属性是如何工作的?
- r - 代码重构 - 代码改进建议
- angular - 在 AmChart 烛台图表上以 1 分钟间隔添加/显示日期时间
- string - Delphi 10.3:转换为字符串时出现 Blob 问题
- php - PHP中加载的Excel文档上的一个表列太多
- python - 验证损失在大范围内随机平衡,但训练损失正在完美减少
- python - 使用 EBO 时 OpenGL 崩溃
- typescript - 如何纠正类型 typeof 类没有索引?
- python - 无法从现有的两个列在 Pandas 数据框中创建新列
- node.js - MongoDB 更新数组内数组中的项