Старайтесь не показывать старые данные с реакцией + редукс. Всегда ждите полной загрузки

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);

Это прекрасно работает в первый раз:

products опорожнить. Таким образом, первый рендер покажет пустой список. Во второй раз (после завершения выборки) продукты будут иметь элементы.

Теперь проблема заключается в том, что произойдет, если я выйду за пределы компонента и снова войду в него (например, с помощью реакции-маршрутизатора).

Самый первый раз будет рисовать с кешированной информацией в приставке-хранилище. Затем, после извлечения, я буду перерисовывать новый список.

Есть ли способ избежать этого каждый раз?

Я подумал пару «решений», но я не в восторге, если они будут работать / являются хорошими практиками:

1. установка в состоянии компонента значения «fetchId» (например, генерация случайного UUID) и использование его в действии fetchProducts . Это значение будет сохранено в хранилище с избыточностью и сравнит его с компонентом. Если они одинаковы, НРАВИТСЯ! Если они различны (fetchId поступает из другого вызова), я ничего не буду рисовать.
2. Очистка хранилища избыточных данных с помощью действия в componentWillUmount

Answer 1

Храните продукт, который я бы использовал в Redux, и отображайте продукт только в том случае, если он соответствует выбранному пользователем. Если он не совпадает, получите запрошенный товар.