Ассинхроность в react — redux?

Question

[WarriorKodeK]

Привет ребят. Разбираюсь с асинхронностю в redux & react.
Есть у меня компонент-контейнер для получения данных про продукт ProductDetailContainer и комнонент для отрисовки ProductDetail. При componentDidMount у меня отсылается dispatch на action который делает запрос на получение данных.

action

import { fetchingError, receiveData, fetching } from "../common";
import store from "../../store/store";
import ProductsService from "../../config/productService";

export const getProductDetail = id => async dispatch => {
  dispatch(fetching());
  return await ProductsService.getProductById(id)
    .then(data => dispatch(receiveData(data)))
    .catch(error => dispatch(fetchingError(error)));
};

export const dispatchGetProductDetailWired = payload => {
  getProductDetail(payload)(store.dispatch);
};

ProductDetailContainer

import React, { Component } from "react";
import { connect } from "react-redux";
import { dispatchGetProductDetailWired } from "../../actions/productDetail/productDetail";
import LoadingPlaceholder from "react-loading-placeholder";
import ProductDetail from "../../components/ProductDetail/ProductDetail";

class ProductDetailContainer extends Component {
  componentWillMount() {
    const { id } = this.props.match.params;
    dispatchGetProductDetailWired(id);
  }
  render() {
    const { fetched, fetching, data } = this.props.productDetail;
    return (
      <div>
        {fetched && !fetching ? (
          <ProductDetail product={data} />
        ) : (
          <LoadingPlaceholder
            numberOfRows={10}
            heightOfRows={40}
            spaceBetween={10}
          />
        )}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    productDetail: state.products
  };
};

export default connect(mapStateToProps)(ProductDetailContainer);

ProductDetail

import React, { Component } from "react";
import TableComponent from "../Table/Table";

export default class ProductDetail extends Component {
  render() {
    console.log(this.props); // 2 раза вызывается при fetched true
    return (
      <React.Fragment>
        <h2>{this.props.product.name}</h2> // не могу работать, т.к они еще не видимы при 1 запросе
        {/* <TableComponent productInfo={data} /> */}
      </React.Fragment>
    );
  }
}

У меня есть ключ fetched, который стает true когда данные загрузились.

Сейчас у меня возникает такая ошибка, что у меня компонент для отрисовки, вызывается когда fetched: true, но данные еще не полностю загрузились.



Как полностю дождаться загрузки данных??

Код

P.S И такая проблема не только с деталями продукта. А и с списком.

Answer 1

[Антон Спирин]

Не находите странным, что компонент у вас называется ProductDetailContainer, при этом вы делаете запрос по id, но пишите полученные данные в редьюсер для списка, заменяя массив объектом и переписывая ключи состояния списка?
Ошибка с map как раз из-за того, что вы массив объектом подменяете.
Вы неправильно спроектировали хранилище и пытаетесь использовать одни и те же ключи для разных целей.

И кто вас научил таким бессмысленным кульбитам вроде dispatchGetProductDetailWired? Так, видимо, до выхода react-redux делали.
Ваш action можно сократить до:

export const getProductDetail = id => async dispatch => {
  try {
    dispatch(fetching());
    const data = await ProductsService.getProductById(id);
    dispatch(receiveData(data));
  } catch (error) {
     dispatch(fetchingError(error);
  }
};

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

class ProductDetailContainer extends Component {
  componentWillMount() {
    const { match: { params: { id } }, getProductDetail } = this.props;

    getProductDetail(id);
  }
  /* ... */
}

const mapStateToProps = state => ({
  productDetail: state.products,
});

const matchDispatchToProps = {
  getProductDetail,
}

export default connect(mapStateToProps, matchDispatchToProps)(ProductDetailContainer);

Comments

[WarriorKodeK]

Антон Спирин, Что посоветуете делать с хранилищем?

Сделать его разным для получения всех продуктов и для получения 1 продукта?

Answer 2

[Олег Гамега]

Как полностю дождаться загрузки данных??

а зачем ее ждть, используйте defaultProps

Comments

[WarriorKodeK]

Как вариант кстати. Спасибо))