javascript - redux-toolkit-> 'A non-serializable value was detected in an action' while converting workin

admin管理员组

文章数量:1410705

I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error ing up 'A non-serializable value was detected in an action, in the path: type. Value: ', Also getting undefined in the redux devtool instead of expected auth/registerFail, the state is changing as expected.

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: {
        'tent-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
      });
    }
  };

I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error ing up 'A non-serializable value was detected in an action, in the path: type. Value: ', Also getting undefined in the redux devtool instead of expected auth/registerFail, the state is changing as expected.

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: {
        'tent-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
      });
    }
  };

• javascript
• redux
• redux-thunk
• redux-toolkit

Share Improve this question Follow asked Aug 31, 2021 at 12:02 RickstaRicksta 2711 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You are accidentally using the action creator functions as types here.

So instead of

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

do this:

 dispatch(registerSuccess(res.data));

本文标签：