redux - 使用 Redux Toolkit 如何有多个案例运行相同的代码？

Question

我正在努力转换一些旧的 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
  },
});

Answer 1

有几个不同的选项。

首先，你可以单独编写case reducer函数，然后将它们多次传递给createSlice，为每个字段名生成对应的 Action :

function resetState() {
  Object.assign(state, {
    token: null,
    // etc
  });
}

const authUserSlice = createSlice({
  name: 'authUser',
  initialState,
  reducers: {
    registerFailed: resetState,
    logout: resetState,
    // etc
  }
});

另一种选择是使用 extraReducers 字段，并使用 builder.addMatcher() 来处理同一个 reducer 的多个情况:

const authUserSlice = createSlice({
  name: 'authUser',
  initialState,
  reducers: {
    // omit
  },
  extraReducers: builder => {
    builder.addMatcher(
      // can pass multiple RTK action creators here
      isAnyOf(registerFailed, loginFailed),
      (state, action) => {
        // reset state here
      }
    )

  }
});

如果您仍在与旧代码进行互操作并且具有像 const LOGIN_FAILED = "LOGIN_FAILED" 这样的旧式操作常量并且需要匹配它们，您可以编写自己的“匹配”函数进行字符串类型比较，例如:

builder.addMatcher(
  (action) => [LOGIN_FAILED, REGISTER_FAILED].includes(action.type),
  (state, action) => {}
)