Estoy tratando de mostrar productos usando el resultado de axios obtenido del reductor, pero el valor de useSelector simplemente no cambiará y aún está vacío incluso después del envío. He comprobado el resultado de axios y la respuesta tiene datos correctos. ¿Tiene algo que ver con esta línea en la documentación de redux?
Con useSelector(), devolver un objeto nuevo cada vez forzará una nueva representación de forma predeterminada.
reductor
import axios from "axios"; export const products = (state = [], action) => { switch (action.type) { case "FETCH_PRODUCTS": { const uri = "/products"; axios.get(uri).then(function (response) { if (response.status == 200) { console.log(response.data.products); // ===> correct new value return { state: response.data.products }; } }); }Aplicación.js
import React, { useEffect } from "react"; import { shallowEqual, useSelector, useDispatch } from "react-redux"; import "../css/App.css"; import { Products, Navbar, Cart } from "../components"; function App() { const dispatch = useDispatch(); const products = useSelector((state) => state.products, shallowEqual); const cart = useSelector((state) => state.cart, shallowEqual); useEffect(() => { dispatch({ type: "FETCH_PRODUCTS", }); console.log(products); // ===> still empty array }, []); return ( <div className="App"> <Navbar /> <Cart cart={cart} /> <Products products={products} /> </div> ); } export default App;Primero debes crear tu acción .
import axios from 'axios'; export const fetchProducts = () => async (dispatch) => { try { const { data } = await axios.get('...'); dispatch({ type: "FETCH_PRODUCTS", payload: data.result }); } catch (error) { console.log(error); } }; Luego, use dispatch y action juntos
import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { fetchProducts } from './actions'; const getSelectors = state => ({ cart: state.cart, products: state.products }); const App = () => { const dispatch = useDispatch(); const {cart, products} = useSelector(getSelectors); useEffect(() => { dispatch(fetchProducts()); }, []); return ( <div className="App"> <Navbar /> <Cart cart={cart} /> <Products products={products} /> </div> ); };