一个人怎么会有多个案例运行与 Redux Toolkit 相同的代码？

Question

我正在努力将一些旧的 Redux 代码转换为使用新的 Redux 工具包。我运行遇到一个问题，在旧代码中，多个 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，为每个字段名称生成相应的操作：

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) => {}
)

一个人怎么会有多个案例运行与 Redux Toolkit 相同的代码？

How does one have multiple cases that run the same code with Redux Toolkit?

redux

redux-toolkit

一个人怎么会有多个案例 运行 与 Redux Toolkit 相同的代码？

How does one have multiple cases that run the same code with Redux Toolkit?

redux

redux-toolkit

一个人怎么会有多个案例运行与 Redux Toolkit 相同的代码？