如何解决从 extraReducers 触发 redux 动作
首先,我知道(或者我想我已经读过)你永远不应该从减速器中触发动作。在我的情况下,我使用 redux-oidc
来处理针对我的应用的身份验证。用户登录后,redux-oidc
会触发 redux-oidc/USER_FOUND
操作并在 state.oidc.user
切片中设置用户的个人资料。
登录后,我需要从我的数据库中查找不在 OIDC 响应中的有关用户的其他信息。目前,我正在从 fetchUserPrefs
中触发 redux-oidc.CallbackComponent.successCallback
thunk,它按预期工作。
我的问题是当用户有一个活动会话并打开一个新浏览器,或者手动刷新页面并再次初始化应用程序时,回调没有被命中,因此不会发生额外的用户水合。 似乎我想要做的是添加一个 extraReducer
来监听 redux-oidc/USER_FOUND
动作并触发 thunk,但这会从减速器中触发一个动作。
有没有更好的方法来做到这一点?
import {createAsyncThunk,createSlice} from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import {User} from "oidc-client";
export const fetchUserPrefs = createAsyncThunk('user/fetchUserPrefs',async (user: User,thunkAPI) => {
// the call out to grab user prefs
// this works as expected when dispatched from the CallbackComponent.successCallback
return user;
})
function hydrateUserState(state: any,action: any) {
// set all the state values from the action.payload
// this works as expected
}
export interface UserState {
loginId: string;
firstName: string;
lastName: string;
email: string;
photoUrl: string;
}
const initialState: UserState = {
loginId: '',firstName: '',lastName: '',email: '',photoUrl: '',};
export const userSlice = createSlice({
name: 'user',initialState,reducers: {
},extraReducers: (builder) => {
builder
.addCase('redux-oidc/USER_FOUND',fetchUserPrefs) // I want to do this,or something like it
.addCase(fetchUserPrefs.fulfilled,hydrateUserState)
.addDefaultCase((state,action) => {})
}
});
export const selectUser = (state: RootState) => state.user;
export default userSlice.reducer;
解决方法
您不能从减速器分派动作是正确的。您想监听要调度的操作并调度另一个操作作为响应。那是中间件的工作。您的中间件应如下所示:
import { USER_FOUND } from 'redux-oidc';
import { fetchUserPrefs } from "./slice";
export const oicdMiddleware = (store) => (next) => (action) => {
// possibly dispatch an additional action
if ( action.type === USER_FOUND ) {
store.dispatch(fetchUserPrefs);
}
// let the next middleware dispatch the 'USER_FOUND' action
return next(action);
};
您可以阅读 custom middleware 上的文档了解更多信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。