Me sale este error Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions. Mi App: <code>imp...

Cayo Legal

Pregunta

student•hace 3 años

Me sale este error

Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions.

Mi App:

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {Col} from 'antd';
import {Searcher, PokemonCard} from './components';
import {getPokemons} from './api';
import { getPokemonsWithDetails } from './actions';
import { setPokemons } from './actions';


function App({}) {

  const pokemons = useSelector(state => state.pokemons);

  const dispatch = useDispatch();

  const getData = async () => {

    //Recibimos los pokemones
    const payloadData = await getPokemons();

    //Disparamos nuestra acción de tipo setPokemons y pasamos como payload la data (los pokemones)
    dispatch(getPokemonsWithDetails(payloadData));

  };

  useEffect(() => {
    
    getData();

  }, []);

  return (

    <div className="container">
      <Col span={8} offset={8}>
        <Searcher />
      </Col>

      <Col span={8} className='pokemons-container'>
        <PokemonCard pokemons={pokemons} />
      </Col>  
    </div>
  )
};

export default App;

El action creator:

export const getPokemonsWithDetails = (pokemons = []) => async (dispatch) => { 

    console.log(pokemons)
    const pokemonsDetailed = await Promise.all(
        pokemons.map(async pokemon => await getPokemonDetails(pokemon))
    );
    
    dispatch(setPokemons(pokemonsDetailed))
}

index:

import { legacy_createStore as createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import App from './App';
import { pokemonsReducer } from './reducers/pokemons';
import './index.css';


const composeAlt = window.__REDUX_DEVTOOLS_EXTENSION__  || compose;

const composedEnhacers = composeAlt(applyMiddleware(thunk));

const store = createStore(pokemonsReducer, composedEnhacers);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Carlos Alberto Usuga Martinez

student•hace 2 años

En mi caso me salio un error similar Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'payload') Debugeando un poco me di cuenta que las custom middlewares que el payload vienen con ua estructura diferente, ya no trae la propiedad action dentro del objeto, por el contrario trae las propiedades type y payload a primer nivel, por lo que corrigiendo esa logica dentro del middelware se corrigio mi problema.

Este Middelware antes lo tenia asi con la propiedad actionInfo.action.payload

export const addNumberToName = (store) => (next) => (actionInfo) => {
  const featured = [
    ...actionInfo.action.payload.map((pokemon, index) => ({
      ...pokemon,
      name: `${index + 1} - ${pokemon.name}`,
    })),
  ]
  const updateActionInfo = {
    ...actionInfo,
    action: { ...actionInfo.action, payload: featured },
  }
  next(updateActionInfo)
}

Y modificandolo quedo así actionInfo.payload

export const addNumberToName = (store) => (next) => (actionInfo) => {
  const featured = [
    ...actionInfo.payload.map((pokemon, index) => ({
      ...pokemon,
      name: `${index + 1} - ${pokemon.name}`,
    })),
  ]
  const updateActionInfo = {
    ...actionInfo,
    payload: featured,
  }
  next(updateActionInfo)
}

Podrias revisar si por ahí tambien es tu problema.

marcos martilotta

student•hace 2 años

Ya lo encontré, creo que en la clase se hizo distinto, o yo soy un despistado, pero chequea que cuando haces el dispatch en App.jsx sea a getPokemonsWithDetails y no a getPokemonDetails. Despues anda a la seccion de archivos de la clase y fijate que tengas bien escrito los archivos de api y de actions.

marcos martilotta

student•hace 2 años

me pasa lo mismo, pudiste solucionarlo?

Me sale este error Uncaught (in promise) Error: Actions must be plain objects. Use custom middleware for async actions. Mi App: <code>imp...

Curso Profesional de React.js y Redux

Curso Profesional de React.js y Redux