在react redux中触发操作后,reducer函数不会调用

时间:2017-11-12 17:54:56

标签: reactjs redux react-redux redux-thunk

我有两个点击处理程序(industryClickHandler和companyClickHandler),它们使用parent.js中的循环填充。即。

    renderListing() {
        if (this.props.data && this.props.data.listingDetails) {
          const listing = this.props.data.listingDetails.map(function(list, index) {
            return (
              <Listing
                key={index}
                id={list.id}
                title={list.title}
                industryClickHandler={() => {
                  return this.getCompanies({
                    industryName: list.title
                  });
                }}
                companyClickHandler={() => {
                  return this.getDepartments({
                    companyName: list.title,
                    companyId: list.id
                  });
                }}
              />
            );
          }, this);
          return listing;
        }
        return null;
      }


getCompanies(industryCreden) {
    this.props.dispatch(
      getIndustryData(industryCreden, this.props.callGraphQL)
    );
  }

  getDepartments(companyCreden) {
    this.props.dispatch(getCompanyData(companyCreden, this.props.callGraphQL));
  }

child.js

<a href="javascript:;"
        size={3}
        className="md-paper md-paper--2"
        style={{ cursor: "pointer" }}
        onClick={() => {
          switch (this.props.dataLogType) {
            case "industry":
              console.log("DatalogType: ", this.props.dataLogType);
              this.props.industryClickHandler();
              break;
            case "company":
              console.log("DatalogType: ", this.props.dataLogType);
              this.props.companyClickHandler();
              break;
            default:
              break;
          }
        }}
      >

reducer.js

export default function(state = {}, action) {
  switch (action.type) {
case GET_RECRUITMENT_INDUSTRY_DATA:
...//CALLING CORRECTLY
case GET_RECRUITMENT_COMPANY_DATA:
...//NOT CALLING AT ALL
}
}

action.js

export const getIndustryData = (data, callGraphql) => {
  return {
    type: GET_RECRUITMENT_INDUSTRY_DATA,
    payload: data
  };
};

export const getCompanyData = (data, callGraphql) => {
  console.log("GET_RECRUITMENT_COMPANY_DATA in action called and data: ", data);
  return {
    type: GET_RECRUITMENT_COMPANY_DATA,
    payload: data
  };
};

实际上,industryClickHandler工作正常并且调用正确的REDUCER SWITCH CASE但是公司的CLickHandler没有调用它自己的减速器开关盒。

同样,我通过REDUX_DEV_TOOL和REDUX_LOGGER仔细检查过,状态也是我的需要。我已经安慰了两个点击处理程序并且都到达了ACTIONS(或ACTION CREATORS)但是,industryClickHandler正在调度精确的redux reducer switch语句,但是companyCli8ckHandler没有这样做。

我也正确使用了mapDispatchToProps。

有谁知道哪个应该是问题;一个是调用正确的reducer而另一个没有调用正确的switch case。感谢

FROM CONSOLE: 操作中的GET_RECRUITMENT_COMPANY_DATA正在工作并从graphql获得响应,如下图所示。

enter image description here

0 个答案:

没有答案