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
?我曾经遇到过这样的问题,我发现如果我在实际操作中使用returndispatch
,这个问题就会消失。
// 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 });
})
}
}