Question

我的应用程序具有以下状态结构（简化）：

国家

products: [ 
  {
    id: number
    name: string
    reviewIds: number[] // the ids of the reviews for a product
  }
],
reviews: [
  {
    id: number,
    content: string
  }
]

零件

ProductDetail和Review。 ProductDetail内部有ul个Review个组件。

...
...
const mapDispatchToProps = (dispatch) => {
    return {
      actions: bindActionCreators(ProductActions as any, dispatch)
    };
  }

@connect(mapStateToProps, mapDispatchToProps)

export class ProductDetailComponent extends React.Component<ProductDetail.Props, ProductDetail.State> {

    constructor(props: ProductDetail.Props ) {
        super(props);
    }

    componentDidMount(){
        //This actions is from REDUX
        this.props.actions.getReviews(this.props.product);
    }

    render() {
      return(
          <ul>
          {
              this.props.reviews.map((review) => {
                  return(<li> review.content </li>);
              })
          }
          </ul>
        )
    }
  }

此组件将被卸载并挂载，从而导致问题

操作

在componentDidMount的{{1}}方法中，我将操作调用到ProductDetail以检索组件正在显示的产品的评论。

成功时网络呼叫，它会调度另一个动作FETCH_API_REVIEW。我有2个减速器听这个动作。

减速

REVIEW_API_SUCCESS会将产品的ReviewsIds放在Product Reducer中。 reviewsIds会将Review完整结构放入审核数组中。

产品减速剂：

Review Reducer

查看减速器

[Actions.REVIEW_API_SUCCESS]: (state, action) => {
        const reviews = action.payload.data;
        const productId = action.payload.productId;

        const reviewsIDs = reviews.map((review) => {
            return review.id;
        });

        const products = state.products.map((product) => {
            if(product.id === productId) {
                const newProduct = Object.assign({}, product, {reviewsIDs});
                return newProduct;
            }
            return product;
        })
        const newState = Object.assign({}, state, { products });

        return newState;
}

我相信这是遵循此处详述的最佳做法http://redux.js.org/docs/recipes/reducers/UpdatingNormalizedData.html第二种方法。

我遇到的问题是，无论何时发生这种情况，我都会将我的两个组件（产品和评论）卸载并重新安装，然后再次调用API等等。导致无限循环。

你能指出我做错的正确方向吗？ TKS！

Redux - 卸载 - 安装组件导致无限循环

0 个答案: