I am a react js / redux newbie. I'm trying to integrate redux with my react app, using an Udemy's course as guide.
As far as I'm concerned, what I did is right, but unfortunately, the course is based on older versions of node, react, redux etc, so in order to get to the point I'm now, I had to make a few changes to the code.
Error message:
A non-serializable value was detected in an action, in the path: payload. Value: Promise...
Action Creator
import backEndApi from '../../main/services/backEndAPI'
import {ACT_USUARIOS_LIST_FETCHED, USUARIOS_URL} from './usuario.types'
export function getList() {
const request = backEndApi.get(USUARIOS_URL)
return {
type: ACT_USUARIOS_LIST_FETCHED,
payload: request
}
}
Reducer:
import { ACT_USUARIOS_LIST_FETCHED } from './usuario.types';
const INITIAL_STATE = {list: []}
const usuarioReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case ACT_USUARIOS_LIST_FETCHED:
return { ...state, list: action.payload.data }
default:
return state
}
}
export default usuarioReducer;
Store config
import React from 'react';
import ReactDOM from 'react-dom/client';
import { configureStore } from "@reduxjs/toolkit";
import { applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import promise from 'redux-promise'
import multi from 'redux-multi'
import thunk from 'redux-thunk'
import './main/index.css';
import App from './main/App';
import reducers from './main/reducers'
const devTools = window.__REDUX_DEVTOOLS_EXTENSION__
&& window.__REDUX_DEVTOOLS_EXTENSION__()
const store = configureStore(
{reducer: reducers},
devTools(
applyMiddleware(thunk, multi, promise)
)
);
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>
);
What the heck is the problem?
Why I keep getting this error, since I'm using the promise middleware?
Any help will be appreciated!
Thank's in advance!!