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

Question

我正在尝试将我正在构建的应用程序切换为使用 Redux Toolkit，并注意到出现此错误 'A non-serializable value was detected in an action, in the path: type. Value: '，同时在 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));

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

redux-toolkit-> 'A non-serializable value was detected in an action' while converting working code over to redux-toolkit

javascript

redux

redux-thunk

redux-toolkit