我正在将一些较旧的Redux代码转换为使用新的Redux Toolkit。我遇到了一个问题,在旧代码中,多个case语句将触发相同的reducer逻辑。新的Case Reducer功能如何做到这一点?
在旧代码中,REGISTER_FAIL,AUHT_ERROR,LOGIN_FAIL,LOGOUT都运行相同的代码。createSlice reducers对象中是否可能有相同类型的场景?
旧密码
case REGISTER_FAIL:
case AUTH_ERROR:
case LOGIN_FAIL:
case LOGOUT:
localStorage.removeItem('token');
return {
...state,
token: null,
isAuthenticated: false,
loading: false,
user: null,
};
default:
return state;
新密码
const authUserSlice = createSlice({
name: 'authUser',
initialState,
reducers: {
registerFail(state, action) {
return {
...state,
token: null,
isAuthenticated: false,
loading: false,
user: null,
};
},
registerSuccess
},
});
有两种不同的选择。
首先,您可以分别编写case reducer函数,然后将它们传递createSlice
多次以为每个字段名称生成相应的操作:
function resetState() {
Object.assign(state, {
token: null,
// etc
});
}
const authUserSlice = createSlice({
name: 'authUser',
initialState,
reducers: {
registerFailed: resetState,
logout: resetState,
// etc
}
});
另一种选择是使用该extraReducers
字段,并使用builder.addMatcher()
同一reduce来处理多种情况:
const authUserSlice = createSlice({
name: 'authUser',
initialState,
reducers: {
// omit
},
extraReducers: builder => {
builder.addMatcher(
isAnyOf(REGISTER_FAIL, AUTH_ERROR, LOGIN_FAIL, LOGOUT),
(state, action) => {
// reset state here
}
)
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句