Как я могу загрузить только часть Redux Store в приложении React?

Question

Мой технический руководитель дал мне задачу разработать способ загрузки только тех частей магазина, которые необходимы для пользовательского интерфейса, загружаемого в одностраничное приложение.Это приложение для работы с большими данными, поэтому это важно.Идея заключается в том, что весь магазин не нужно загружать, потому что объем данных.

Answer 1

Я недавно реализовал подобное и нашел Как динамически загружать редукторы для разделения кода в приложении Redux? , в котором есть ссылка на http://nicolasgallagher.com/redux-modules-and-code-splitting/, где Николас описывает, как они это делали в Twitter.

TL; DR Для этого вам нужны ленивые редукторы.Подход, описанный здесь, должен иметь класс «редуктор-реестр».Вы регистрируете свой редуктор / ы, когда вам нужно его / их использовать.Затем реестр вызывает прослушиватель с комбинированным редуктором, который включает в себя все зарегистрированные в настоящее время редукторы.Вы присоединяете слушателя к реестру, который вызывает replaceReducer в вашем магазине, чтобы обновить его редуктор.

Моя реализация здесь .. https://github.com/lecstor/redux-helpers/blob/master/src/reducer-registry.ts

Answer 2

В вашем mapStateToProps вы можете выбрать ключи нужного вам хранилища в вашем компоненте.

Например,

function mapStateToProps(state) {
  const { key1, key2 } = state;
  const {subKey, ...restKeys} = key1;

  return {
    remainder: ...restKeys,
    subKey,
    key2,
  };
}

Теперь к этим данным можно получить доступ в компоненте.с this.props.remainder или this.props.subKey или this.props.key2