Реагировать / Redux загрузить выгружаемый список идентификаторов, затем загрузить страницу

Question

У меня есть компонент реагирования в приложении с поддержкой Redux, который начинается с загрузки списка идентификаторов в двумерном массиве. (Каждая «страница» представлена ​​элементом внешнего массива [1-е измерение])

Вот компонент:

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(), и если список идентификаторов не пуст, он запустит страницу, заполняющуюся при выполнении действия loadInsiderPage(), которое выполняет страница из списка идентификаторов.

Как правильно настроить этот триггер после загрузки списка идентификаторов?

Я думал, что смогу сделать это в 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 и загружают их в редуктор.

Большая проблема, с которой я сталкиваюсь, заключается в том, что у Компонента иногда пропускаются реквизиты, которые удерживают действие loadInsiderPage от вызова с page переданным объектом.

Answer 1

В вашем создателе действий loadInsiderInfo() вы можете принять параметр для текущего идентификатора страницы. Теперь, когда информация загружена, внутри этого создателя действия вы можете отправить другое действие, вызвав в нем 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). Таким образом, вы обрабатываете каждый случай после загрузки данных инсайдерской информации.