在旧的redux方法中,我们可以像这样创建reducer-不同的action类型,但相同的action:
export default function authReducer(state = initialState, action) {
switch (action.type) {
case AUTH_ERROR:
case LOGIN_FAIL:
case LOGOUT_SUCCESS:
case REGISTER_FAIL:
localStorage.removeItem("xts0");
return {
...state,
token: null,
user: null,
isAuthenticated: false,
isLoading: false,
};
default:
return state;
}
}
如何使用createSlice
实用程序实现同样的功能?
const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
authError(state, action){},
loginFail(state, action){},
and so on
}
})
1条答案
按热度按时间mzsu5hc01#
您可以创建一个应用状态更新逻辑的reducer函数。
如果
authSlice
正在创建这些操作,则对每个操作使用相同的reducer函数:如果所有这些操作都已经存在,并且
authSlice
只需要处理它们,那么使用extraReducers
属性。这是为外部(* 到切片 *)动作定义缩减器情况。在上面我假设所有的动作都是Redux-Toolkit动作(* 例如:在其他切片中创建或使用
createAction
*)。如果它们是“遗留”Redux操作,那么我相信您可能需要为这种情况指定type
属性,例如。.addCase(authError.type, resetAuth)
。此外,为了使代码更 *DRY *,您可以使用Matcher来减少编写的代码量。
范例: