Question

我在启用Redux的应用程序中有一个react组件，该组件首先在2D数组中加载ID列表。（每个“页面”都由外部数组[1rst维]的元素表示）

以下是组件：

import React, { Component, Fragment } from "react";
import { loadInsiderPage, loadInsiderInfo } from "../../actions/insider";
import { connect } from "react-redux";
import IndividualInsider from "./individual";

import Paginate from "../common/paginate";

class InsiderList extends Component {
  componentDidMount() {
    if (this.props.insiderIds.length > 0) {
      this.props.loadInsiderPage(this.props.insiderIds[0]);
    } else {
      this.props.loadInsiderInfo();
    }
  }
  render() {
    let { insiderIds, insiders } = this.props;
    let insiderFormat = insiders.map(x => {
      return <IndividualInsider key={x._id} insider={x} />;
    });
    return (
      <Fragment>
        <div className="container">
          <Paginate
            pages={insiderIds}
            changePage={this.props.loadInsiderPage}
          />
          {insiderFormat}
        </div>
      </Fragment>
    );
  }
}

export default connect(
  null,
  { loadInsiderPage, loadInsiderInfo }
)(InsiderList);

如果未通过运行loadInsiderInfo()操作填充该组件，则该组件将加载ID列表；如果ID列表不为空，则将通过运行loadInsiderPage()操作来触发该页面的填充从ID列表进入页面。

加载ID列表后，如何正确触发此触发器？

我本以为我可以在componentWillReceiveProps()中做到这一点，但是我不确定nextProps属性的用途。

我的动作如下：

export const loadInsiderInfo = () => dispatch => {
  Axios.get("insider/list/pages/25")
    .then(list => {
      dispatch({ type: LOAD_INSIDER_LIST, payload: list.data });
    })
    .catch(err => dispatch({ type: GET_ERRORS, payload: err }));
};

export const loadInsiderPage = page => dispatch => {
  console.log(page);
  Axios.post("insider/page", { page })
    .then(res => dispatch({ type: LOAD_INSIDER_PAGE, payload: res.data }))
    .catch(err => dispatch({ type: GET_ERRORS, payload: err }));
};

两者都简单地从API中获取数据并将其加载到reducer中。

我遇到的一个大问题是，有时组件会传递一些道具，以防止loadInsiderPage对象被传入的page动作调用。

Answer 1

在动作创建者loadInsiderInfo()中，您可以接受当前页面ID的参数。现在，在加载信息后，您可以在此动作创建者中通过调用其中的loadInsiderPage(id)来调度另一个动作。这样，内部信息操作创建者便会首次加载您的页面信息。

类似这样的东西：

export const loadInsiderInfo = (id) => dispatch => {
  Axios.get("insider/list/pages/25")
    .then(list => {
      dispatch({ type: LOAD_INSIDER_LIST, payload: list.data });
      if(<your-data-loaded>){
         loadInsiderPage(id)(dispatch);
      }
    })
    .catch(err => dispatch({ type: GET_ERRORS, payload: err }));
};

现在，当尚未加载任何信息时，只需调用loadInsiderInfo(id)一次。对于其他时间，请直接分派loadInsiderPage(id)操作。这样，您就可以在加载内部信息数据之后处理所有情况。

React / Redux加载分页ID列表，然后加载页面

1 个答案: