Redux-toolkit-> 'A non-serializable value was detected in an action'，同时将工作代码转换为 redux-toolkit

Question

我正在尝试切换我正在构建的应用程序来使用Redux工具包，并注意到这个错误即将出现'在一个动作中检测到一个不可序列化的值，在路径:type。值:'，在redux devtool中也未定义，而不是预期的auth/registerFail，状态正在按预期变化。

import axios from 'axios';
import { setAlert } from '../alerts/alertSlice';
const slice = createSlice({
name: 'auth',
initialState: {
token: localStorage.getItem('token'),
isAuthenticated: null,
loading: true,
user: null,
},
reducers: {
registerSuccess: (state, action) => {
const { payload } = action.payload;
state.push({
payload,
isAuthenticated: true,
loading: false,
});
},
registerFail: (state) => {
localStorage.removeItem('token');
state.token = null;
state.isAuthenticated = false;
state.loading = false;
state.user = null;
},
},
});
const { registerSuccess, registerFail } = slice.actions;
export default slice.reducer;
// Register User
export const register =
({ name, email, password }) =>
async (dispatch) => {
const config = {
headers: {
'comtent-Type': 'application/json',
},
};
const body = JSON.stringify({ name, email, password });
try {
const res = await axios.post('/api/users', body, config);
dispatch({
type: registerSuccess,
payload: res.data,
});
} catch (err) {
const errors = err.response.data.errors;
if (errors) {
errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
}
dispatch({
type: registerFail
});
}
};

Answer 1

您在这里不小心使用了操作创建器函数作为类型。

所以不用

dispatch({
type: registerSuccess,
payload: res.data,
});

这样做:

dispatch(registerSuccess(res.data));