CODEWITHSUNDEEP
javascriptreactjsredux
prototype26
prototype26

Reputation: 141

useSelector not updating even after dispatch

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;

Upvotes: 0

Views: 413

Answers (1)

Ali Yaghoubi
Ali Yaghoubi

Reputation: 1280

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>
    );
};

Upvotes: 1

Related Questions