無法讀取 Redux 中未定義的屬性“類型”

Question

我正在編寫反應功能組件，它應該從服務器獲取一些數據。 我正在使用 redux，但出現錯誤“無法讀取未定義的屬性‘類型’”

幫助我，請找出我的錯誤

這是我的反應組件 Products.js。 我認為導出部分可能存在錯誤。 父組件 Products.js (App.js) 也包裹在 Provider 上

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchProducts } from '../actions/productActions';
import { productsReducer } from '../reducers/productReducers'


function Products({ store, products, cartItems, setCartItems }) {

    useEffect(() => {
        store.dispatch(productsReducer())
    })
    const [product, setProduct] = useState(null);

    return (
        <div>
            {
              !products
                ? (<div>Loading...</div>)
                :
                (<ul className="products">
                   {products.map(product => (
                      <li key={product._id}>
                        <div className="product">
                           <a href={"#" + product._id}>
                             <img src={product.image} alt={product.title} />
                                <p>{product.title}</p>
                           </a>
                             <div className="product-price">
                               <div>${product.price}</div>
                                  <button>Add To Cart</button>
                               </div>
                             </div>
                      </li>
                   ))}
                </ul>)
            }
        </div >
    )
}

export default connect((state) => ({ products: state.products.items }), {
     fetchProducts,
 })(Products);

這是我的 store.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { productsReducer } from './reducers/productReducers';

const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    combineReducers({
        products: productsReducer,
    }),
    initialState,
    composeEnhancer(applyMiddleware(thunk))
)

export default store;

我的減速器，我在這個文件中遇到錯誤（無法讀取未定義的屬性“類型”），也許，我在傳輸錯誤“操作”

import { FETCH_PRODUCTS } from "../types";

export const productsReducer = (state = {}, action) => {
    switch (action.type) {
        case FETCH_PRODUCTS:
            console.log('it work!')
            return { items: action.payload };
        default:
            return state;
    }
};

我的行動

import { FETCH_PRODUCTS } from "../types";

export const fetchProducts = () => async (dispatch) => {
    const res = await fetch("/api/products");
    const data = await res.json();
    console.log(data);
    dispatch({
        type: FETCH_PRODUCTS,
        payload: data,
    });
};

和我的類型

export const FETCH_PRODUCTS = "FETCH_PRODUCTS"

這是關於 redux 的研究項目，但在 class 組件上的原始教師編寫代碼中。 原始代碼在這里和這里

如果我像源代碼一樣編寫 class 組件，一切正常，所以我認為這是錯誤的原因

Answer 1

dispatch function 期望 redux 動作作為參數，而不是減速器。 在你的情況下：

import { fetchProducts } from '../actions/productActions';

function Products({ store, products, cartItems, setCartItems }) {

    useEffect(() => {
        store.dispatch(fetchProducts());
    })

    ...
}