title: redux-toolkit-> 'A non-serializable value was detected in an action' while converting working code over to redux-toolkit
body: <p>I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error coming up 'A non-serializable value was detected in an action, in the path: <code>type</code>. Value: ', Also getting undefined in the redux devtool instead of expected auth/registerFail, the state is changing as expected.</p>
  <pre><code>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) =&gt; {
        const { payload } = action.payload;
        state.push({
          payload,
          isAuthenticated: true,
          loading: false,
        });
      },
      registerFail: (state) =&gt; {
        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 }) =&gt;
    async (dispatch) =&gt; {
      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) =&gt; dispatch(setAlert(error.msg, 'danger')));
        }
  
        dispatch({
          type: registerFail
        });
      }
    };
  </code></pre>