запустить мой метод, когда редукса изменить магазин реквизита.ReactJS

Question

У меня есть конкретная проблема в моем приложении React-Redux.Я использую Redux-saga для связи с REST API, поэтому Redux-saga не возвращает обещание.

В моем приложении я также использую состояние (в дополнение к хранилищу), которое я хотел бы изменитьсостояние после получения ответа SUCCESS от Redux-saga.

Мой метод this.props.handleLastWeek(this.props.dateFrom, this.props.dateTo) возвращает: this.props.isLoading: false и this.props.dataApi в случае успеха redux-saga.

Поэтому я хотел бы запустить метод appendTable(), когда this.props.handleLastWeek возвращает this.props.isLoading false и this.props.dataApi не равно нулю.

PS: чистый компонент не является проблемой?

Мой код выглядит примерно так:

class TableComponent extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      ...
    };

    this.handleDateWeek = this.handleDateWeek.bind(this);
    this.appendTable = this.appendTable.bind(this);
  }

   componentDidMount() {
     this.handleDateWeek();
   }

  handleDateWeek() {
    this.props.handleLastWeek(this.props.dateFrom, this.props.dateTo);
  }

  appendTable() {
    this.setState(
      {
        columnStatic: [{ name: "customerName", title: "Klient" }],
        columnsDynamic: [],
        columnBands: [],
        columns: [],
        tableColumnExtensions: [],
        percentColumns: []
      },
      () => {
        var i = 1;
        var j = 1;
        var k = 1;
        var l = 0;
        var dateArray = [];

        this.props.dataApi.map(dA => {
          dA.data.map(dat => {
            if (dateArray.indexOf(dat.date) > -1) {
              return;
            }
            dateArray.push(dat.date);

            this.setState(prevState => ({
              columnsDynamic: [
                ...prevState.columnsDynamic,
                { name: "ordersAmount" + i++, title: "Zamówienia" },
                { name: "earnings" + i++, title: "Obrót (brutto)" }
              ],

              columnBands: [
                ...prevState.columnBands,
                {
                  title: `${dat.date}`,
                  children: [
                    { columnName: "ordersAmount" + j++ },
                    { columnName: "earnings" + j++ }
                  ]
                }
              ],

              percentColumns: [
                ...prevState.percentColumns,
                `ordersAmount${l++ % 2 != 0 ? l : l++}`
              ],

              tableColumnExtensions: [
                ...prevState.tableColumnExtensions,
                {
                  columnName: "ordersAmount" + k++,
                  width: 90,
                  align: "right"
                },
                {
                  columnName: "earnings" + k++,
                  width: 150,
                  align: "right"
                }
              ]
            }));
          });
        });
      }
    );
  }

return (
  <Fragment>
      {this.props.isLoading ? (
          <div className={classes.loadingContainer}>
            <Loading />
          </div>
      ) : (
        <Fragment>
          <Paper>
            <Grid
              rows={dataApi}
              columns={columns.concat(columnStatic, columnsDynamic)}
            >
               ...
            </Grid>
          </Paper>
        </Fragment>
      )}
  </Fragment>
);

Answer 1

Вы можете сделать это в componentDidUpdate:

componentDidUpdate(prevProps) {
  if (this.props.isLoading === false && prevProps.isLoading !== this.props.isLoading) {
    this.appendTable();
  }
}

Сохранение его PureComponent не будет проблемой, поскольку isLoading является примитивной логической опорой, и, следовательно, diff вызовет обновление компонента.

Сказав это, я бы предложил не держать вышеупомянутую информацию в состоянии реакции, так как она может быть получена из реквизита. Вам просто нужно переместить логику преобразователя в метод, который можно вызвать из render. Это обеспечит единый источник правды, который является основным принципом redux.