redux 我如何能有共同的行动,为多个reducers使用slice

ymzxtsji  于 2023-10-19  发布在  其他
关注(0)|答案(1)|浏览(128)

在旧的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
  }
})
mzsu5hc0

mzsu5hc01#

您可以创建一个应用状态更新逻辑的reducer函数。

const resetAuth = (state, action) => {
  localStorage.removeItem("xts0");
  return initialState;
};

如果authSlice正在创建这些操作,则对每个操作使用相同的reducer函数:

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    authError: resetAuth,
    loginFail: resetAuth,
    // ... and so on
  },
});

如果所有这些操作都已经存在,并且authSlice只需要处理它们,那么使用extraReducers属性。这是为外部(* 到切片 *)动作定义缩减器情况。

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    ...
  },
  extraReducers: builder => {
    builder
      .addCase(authError, resetAuth)
      .addCase(loginFail, resetAuth)
      // ... and so on
  },
});

在上面我假设所有的动作都是Redux-Toolkit动作(* 例如:在其他切片中创建或使用createAction *)。如果它们是“遗留”Redux操作,那么我相信您可能需要为这种情况指定type属性,例如。.addCase(authError.type, resetAuth)
此外,为了使代码更 *DRY *,您可以使用Matcher来减少编写的代码量。
范例:

import { isAnyOf } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    ...
  },
  extraReducers: builder => {
    builder
      .addMatcher(isAnyOf(authError, loginFail, /* ... and so on */), resetAuth);
  },
});

相关问题