Rechazo no controlado (error): las acciones deben ser objetos simples. Use middleware personalizado para acciones asíncronas.
Quería agregar comentarios con cada publicación. Entonces, cuando se ejecutan las publicaciones de búsqueda, quiero llamar a la API de comentarios de búsqueda para todas las publicaciones.
export function bindComments(postId) { return API.fetchComments(postId).then(comments => { return { type: BIND_COMMENTS, comments, postId } }) }Debe enviar después de que finalice la solicitud asíncrona.
Esto funcionaría:
export function bindComments(postId) { return function(dispatch) { return API.fetchComments(postId).then(comments => { // dispatch dispatch({ type: BIND_COMMENTS, comments, postId }); }); }; }Para los futuros buscadores que podrían haber dejado caer detalles simples como yo, en mi caso simplemente olvidé llamar a mi función de acción entre paréntesis.
acciones.js:
export function addNewComponent() { return { type: ADD_NEW_COMPONENT, }; }miComponente.js:
import React, { useEffect } from 'react'; import { addNewComponent } from '../../redux/actions'; useEffect(() => { dispatch(refreshAllComponents); // <= Here was what I've missed. }, []); Olvidé despachar la función de acción con () . Entonces, hacer esto resolvió mi problema.
useEffect(() => { dispatch(refreshAllComponents()); }, []);Nuevamente, esto podría no tener nada que ver con el problema de OP, pero espero ayudar a las personas con el mismo problema que el mío.
El error simplemente le pide que inserte un Middleware en el medio que ayudaría a manejar las operaciones asíncronas.
Podrías hacer eso por:
npm i redux-thunk
Inside index.js import thunk from "redux-thunk" import { createStore, applyMiddleware } from 'redux'; ...createStore(rootReducers, applyMiddleware(thunk));Ahora, las operaciones asíncronas funcionarán dentro de sus funciones.