Estoy tratando de cambiar una aplicación que estoy construyendo para usar Redux Toolkit, y he notado que aparece este error 'Se detectó un valor no serializable en una acción, en la ruta: type . Valor: ', también se vuelve indefinido en la herramienta de desarrollo redux en lugar de auth/registerFail esperado, el estado está cambiando como se esperaba.
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 }); } };Accidentalmente está utilizando las funciones del creador de acciones como tipos aquí.
Entonces, en lugar de
dispatch({ type: registerSuccess, payload: res.data, });hacer esto:
dispatch(registerSuccess(res.data));