Quiero mostrar una lista de componentes en la página y estoy usando react-redux para eso. Hay muchos repetitivos que no están claros y los estoy mezclando para lograr alguna funcionalidad. Hay un problema con la acción asíncrona que arroja el siguiente error
Actions must be plain objects. Use custom middleware for async actions.
acción
export const fetchPublicDisplays = () => async dispatch => { console.log("object") const response = await api.get('/display/list'); dispatch({ type: FETCH_PUBLIC_DISPLAYS, payload: response.data }); };reductor
const displayReducer = (state = [], action) => { switch (action.type) { case FETCH_PUBLIC_DISPLAYS: return action.payload; default: return state } }El componente
class PublicHome extends React.Component { componentDidMount() { this.props.fetchPublicDisplays() } renderDisplays() { console.log(this.props) if (this.props.displays) { return this.props.displays.map(display => { return ( <div className="item" key={display.id}> display </div> ) }) } } render() { return ( <> {this.renderDisplays()} </> ) } } const mapStateToProps = state => { return { displays: state.deisplays }; }; export default connect( mapStateToProps, { fetchPublicDisplays } )(PublicHome);El segundo argumento para conectarse es una función (mapDispatchToProps) que obtiene el envío como argumento y devuelve un objeto. Aquí está el documento oficial para el mismo: https://react-redux.js.org/using-react-redux/connect-mapdispatch . En su caso, le está dando un objeto, es decir, fetchPublicDisplays. El segundo problema es que no puede hacer cosas asíncronas dentro de las acciones redux, primero debe hacer la operación asíncrona y luego llamar a la acción redux para actualizar el estado de la tienda. Aquí está su código modificado que debería funcionar:
import React from "react"; import { connect } from "react-redux"; import api from "axios"; export const displayReducer = (state = [], action) => { switch (action.type) { case "FETCH_PUBLIC_DISPLAYS": return action.payload; default: return state; } }; export const fetchPublicDisplays = (data) => (dispatch) => {}; class PublicHome extends React.Component { componentDidMount() { this.fetchPublicDisplaysAsync(); } fetchPublicDisplaysAsync = async () => { const response = await api.get("/display/list"); this.props.fetchPublicDisplays(response.data); }; renderDisplays() { console.log(this.props); if (this.props.displays) { return this.props.displays.map((display) => { return ( <div className="item" key={display.id}> display </div> ); }); } } render() { return <>{this.renderDisplays()}</>; } } const mapStateToProps = (state) => { return { displays: state.deisplays }; }; const mapDispatchToProps = (dispatch) => ({ fetchPublicDisplays: (data) => { dispatch({ type: "FETCH_PUBLIC_DISPLAYS", payload: data }); } }); export const App = connect(mapStateToProps, mapDispatchToProps)(PublicHome);Aquí está el enlace de codeSandbox para el mismo: https://codesandbox.io/s/distracted-meadow-3qi32?file=/src/App.js:0-1243