Redux 状态 returns 的解构内容是一个空数组，但在我使用 axios 获取数据后有数据

Question

我正在创建一个电子商务前端，我将其服务器发布在使用 nodejs 创建的 Heroku 中。我正在尝试使用 Redux 来实现网站上的每个操作。我尝试使用 redux 方法调用数据库中的所有产品列表，但是当 console.log 产品 after-action creators 我得到一个空数组

我的商店代码

import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';
import { productsListReducer} from './reducers/productsReducer';


const reducer = combineReducers({

     productList:productsListReducer,
});

const initialState = {};

const middleware = [thunk];

const store = createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

我的产品常量

export const PRODUCTS_LIST_REQUEST = "PRODUCTS_LIST_REQUEST";
export const PRODUCTS_LIST_SUCCESS = "PRODUCTS_LIST_SUCCESS";
export const PRODUCTS_LIST_FAIL = "PRODUCTS_LIST_FAIL";

我的产品Reducer代码

import {
  PRODUCTS_LIST_FAIL,
  PRODUCTS_LIST_REQUEST,
  PRODUCTS_LIST_SUCCESS,
} from "../constants/productConstants";

export const productsListReducer = (state = { products:[]}, action) => {
  
  switch (action.type) {
    case PRODUCTS_LIST_REQUEST:
      return {
        loading: true,
      };

    case PRODUCTS_LIST_SUCCESS:
      return {
        loading: false,
        products: action.payload,
      };

    case PRODUCTS_LIST_FAIL:
      return {
        loading: false,
        error: action.payload,
      };

    default:
      return state;
  }
};

我的 Action Creator 代码

import axios from "axios";
import {
  PRODUCTS_LIST_FAIL,
  PRODUCTS_LIST_REQUEST,
  PRODUCTS_LIST_SUCCESS,
} from "../constants/productConstants";

export const Products = () => async (dispatch) => {
  try {
    dispatch({
      type: PRODUCTS_LIST_REQUEST,
    });

    const headers = {
      "Content-Type":"application/json",
    };
    const url = `${process.env.REACT_APP_SERVER_URL}api/products`;

    const { data } = await axios.get(url, { headers });

    dispatch({
      type: PRODUCTS_LIST_SUCCESS,
      payload: data,
    });
    
  } catch (error) {
    const message =
      error.response && error.response.data.message
        ? error.response.data.message
        : error.message;

    dispatch({
      type: PRODUCTS_LIST_FAIL,
      payload: message,
    });
  }
};

我如何尝试在主页中获取 The Reducer 数据

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Products } from "../../actions/productsActions";
import SideBar from "../Home/SideBar";
import SingleProduct from "../Home/SingleProduct";

const Home = () => {

const dispatch = useDispatch();

const productList = useSelector((state) => state.productList);

const { products, error, loading } = productList

console.log("products", products)

useEffect(() => {
    dispatch(Products);
},[dispatch])


  return (
    <div className ='home'>
      <SideBar />
      <div className="productConatiner">
        {
            products.map((product) => {
              return <span>{product?.title}</span>
            })
        };
      </div>
    </div>
  );
};

export default Home;

Answer 1

问题是您实际上并没有调度一个动作。你应该写

useEffect(() => {
  dispatch(Products());
},[dispatch])

而不是

useEffect(() => {
  dispatch(Products);
},[dispatch])

Redux 状态 returns 的解构内容是一个空数组，但在我使用 axios 获取数据后有数据

Destructured contents of Redux state returns an empty array but there is data after I fetch data with axios

reactjs

redux

react-redux

axios