I'm trying to display products using the fetched axios result from reducer, but the useSelector value just won't change and is still empty even after dispatch. I have checked the axios result and the response has correct data. Does it have something to do with this line on redux documentation?
With useSelector(), returning a new object every time will always force a re-render by default.
reducer
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 };
}
});
}
App.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;
You should first create your action
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);
}
};
Then, Use dispatch and action together
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>
);
};