Can some one help me with this react, redux-promise problem?

Viewed 17

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!!

0 Answers
Related