Reactjs ';调度';未定义-mapDispatchToProps未通过路由器

Reactjs ';调度';未定义-mapDispatchToProps未通过路由器,reactjs,redux,Reactjs,Redux,“店面”代码中有一个分派未定义的错误。我认为这是因为我没有将属性传递到下一个级别,但我不确定这是否正确。我希望能够将分派功能正确传递到产品。操作代码 我已尝试通过删除不必要的代码来尽可能缩小问题的范围。我有一个正常工作的用户reducer,但我不知道为什么这个产品reducer不能正常工作 // products.reducer const initialState = { products: null, error: null }; const ProductRed

“店面”代码中有一个
分派
未定义的错误。
我认为这是因为我没有将属性传递到下一个级别,但我不确定这是否正确。
我希望能够将分派功能正确传递到
产品。操作
代码

我已尝试通过删除不必要的代码来尽可能缩小问题的范围。
我有一个正常工作的用户reducer,但我不知道为什么这个产品reducer不能正常工作

// products.reducer

const initialState = {
    products: null,
    error: null
  };

  const ProductReducer = (state = initialState, action) => {
    let newState = null;
    switch(action.type){
      case "GET_ALL_PRODUCTS": newState = {
                              ...state,
                              products: action.products
                            };
                            return newState;
      case "GET_ALL_PRODUCTS_FAIL": newState = {
                                  ...state,
                                  error: action.error
                                };
                                return newState;
      default: return state;
    }
  };

  export default ProductReducer;

谢谢你的帮助

这是因为您没有从loadAllProducts操作返回dispatch

/product.actions
从“../../axios wp”导入wcapi;
export const loadAllProducts=(每页)=>(分派)=>{//进行此更改
wcapi.get(“产品”{
每页:每页,
})
。然后((响应)=>{
//成功请求
让productsRes=response.data;
分派({类型:“获取所有产品”,产品:productsRes});
})
.catch((错误)=>{
//对于4xx和5xx状态,请求无效
分派({类型:“获取所有产品失败”,错误:err});
})

}
我以前从未遇到过这样的问题。然后我使用了
returndispatch=>{}
如下:

export const loadAllProducts = perpage => {
    return dispatch => {
        wcapi.get("products", {
            per_page: perpage,
        })
        .then((response) => {
            // Successful request
            let productsRes = response.data;
            dispatch({ type: "GET_ALL_PRODUCTS", products: productsRes });
        })
        .catch((err) => {
            // Invalid request, for 4xx and 5xx statuses
            dispatch({ type: "GET_ALL_PRODUCTS_FAIL", error: err });
        })
    }
}

您是否尝试在操作中使用
disaptch
?我曾经遇到过这样的问题,我发现如果我在实际操作中使用return
dispatch
,这个问题就会消失。
// shopfront

import React, { Component } from "react";
import { Container, Row, Col, InputGroup, InputGroupAddon, Button } from "reactstrap";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { Alert } from "reactstrap";

import * as actionMethods from "../../store/actions/index.actions";
import Product from "../../components/Product/Product";

class Shopfront extends Component {

    state = {
        onAlert: false,
        internalError: null
    };

    componentDidMount() {
        this.props.loadAllProducts(5);
        console.log("component_did_mount_run")
    }

    render() {

        let ProductsList = <h1>No Products Yet!</h1>;
        if (this.props.products !== null) {
            ProductsList = this.props.products.map(Product => {
                return <Product
                    key={Product.id}
                    title={Product.name}
                    excerpt={Product.description}
                    medialink={Product.permalink}
                    ProductId={Product.id}
                />;
            });
        }

        return (
            <Container>
                {ProductsList}
            </Container>
        );
    }
};

const mapStateToProps = (state) => {
    return {
        products: state.productsRed.products,
        error: state.productsRed.error
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        loadAllProducts: (perpage) => { dispatch(actionMethods.loadAllProducts(perpage)) }
    };
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Shopfront));
// index.actions

export {
    loadAllProducts
} from "./product.actions";
// product.actions

import wcapi from "../../axios-wp";

export const loadAllProducts = (perpage) => {
    wcapi.get("products", {
        per_page: perpage,
    })
        .then((response) => {
            // Successful request
            let productsRes = response.data;
            dispatch({ type: "GET_ALL_PRODUCTS", products: productsRes });
        })
        .catch((err) => {
            // Invalid request, for 4xx and 5xx statuses
            dispatch({ type: "GET_ALL_PRODUCTS_FAIL", error: err });
        })
}

export const loadAllProducts = perpage => {
    return dispatch => {
        wcapi.get("products", {
            per_page: perpage,
        })
        .then((response) => {
            // Successful request
            let productsRes = response.data;
            dispatch({ type: "GET_ALL_PRODUCTS", products: productsRes });
        })
        .catch((err) => {
            // Invalid request, for 4xx and 5xx statuses
            dispatch({ type: "GET_ALL_PRODUCTS_FAIL", error: err });
        })
    }
}