Question

从本指南中，我在这里找到：

https://daveceddia.com/where-fetch-data-redux/

我有一个漂亮的标准减速器，可以处理数据，加载和错误：

import {
  FETCH_PRODUCTS_BEGIN,
  FETCH_PRODUCTS_SUCCESS,
  FETCH_PRODUCTS_FAILURE
} from './productActions';

const initialState = {
  items: [],
  loading: false,
  error: null
};

export default function productReducer(state = initialState, action) {
  switch(action.type) {
    case FETCH_PRODUCTS_BEGIN:
      return {
        ...state,
        loading: true,
        error: null
      };

    case FETCH_PRODUCTS_SUCCESS:
      return {
        ...state,
        loading: false,
        items: action.payload.products
      };

    case FETCH_PRODUCTS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload.error,
        items: []
      };

    default:
      return state;
  }
}

然后是调用动作并根据这些状态进行绘制的组件：

import React from "react";
import { connect } from "react-redux";
import { fetchProducts } from "/productActions";

class ProductList extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchProducts());
  }

  render() {
    const { error, loading, products } = this.props;

    if (error) {
      return <div>Error! {error.message}</div>;
    }

    if (loading) {
      return <div>Loading...</div>;
    }

    return (
      <ul>
        {products.map(product =>
          <li key={product.id}>{product.name}</li>
        )}
      </ul>
    );
  }
}

const mapStateToProps = state => ({
  products: state.products.items,
  loading: state.products.loading,
  error: state.products.error
});

export default connect(mapStateToProps)(ProductList);

这在第一次使用时效果很好：

产品为空。因此，第一个渲染将显示空白列表。第二次（获取完成后）产品将有商品。

现在，问题是，如果我离开组件然后再次进入（例如，使用react-router），会发生什么情况。

第一次，它将使用redux存储中的缓存信息进行绘制。然后，在提取之后，我将重新绘制新列表。

有什么办法可以避免这种情况吗？

我想过几个“解决方案”，但我不确定它们是否行得通/是好的做法：

在组件状态中设置值“ fetchId”（例如，生成随机UUID）并在 fetchProducts 操作中使用它。该值将保存在redux存储中，并将redux fetchId与组件进行比较。如果它们相同，请拖动！如果它们不同（fetchId来自不同的调用），我将不会绘制任何内容。
清理redux存储，在 componentWillUmount

Answer 1

将我想要的产品存储在Redux中，并且仅在与用户选择的产品匹配时渲染产品。如果不匹配，则获取请求的产品。

避免使用react + redux显示旧数据。始终等待提取完成

1 个答案: