如何有多个情况下运行相同的代码与Redux工具包?

Question

我正在将一些旧的Redux代码转换为使用新的Redux工具包。我遇到了一个问题，在旧代码中，多个case语句将触发相同的reducer逻辑。如何用新的case减速器函数做到这一点呢?

在旧代码中，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()来处理相同减速机的多个情况:

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