Redux-管理预加载状态

小编典典

Redux-管理预加载状态

reactjs

我正在构建一个应用程序，在该应用程序启动时，我需要在其中预加载people和planet数据（ 将来可能会添加更多的预加载要求
）。我希望在商店中具有将应用程序的全局状态表示为的值loaded: <boolean>。仅当预加载要求people.loaded: true和planet.loaded: true为true 时，该值才为true。该商店将如下所示：

Store
├── loaded: <Boolean>
├── people:
│   ├── loaded: <Boolean>
│   └── items: []
├── planets:
│   ├── loaded: <Boolean>
│   └── items: []

单独的操作创建者发出所需的异步请求，并由People和Planets缩减程序处理这些操作。如下所示（使用redux-thunk）：

actions/index.js

import * as types from '../constants/action-types';
import {getPeople, getPlanets} from '../util/swapi';

export function loadPeople () {
  return (dispatch) => {
    return getPeople()
      .then((people) => dispatch(addPeople(people)));
  };
}

export function loadPlanets () {
  return (dispatch) => {
    return getPlanets()
      .then((planets) => dispatch(addPeople(planets)));
  };
}

export function addPeople (people) {
  return {type: types.ADD_PEOPLE, people};
}

export function addPlanets (planets) {
  return {type: types.ADD_PLANETS, planets};
}

export function initApp () {
  return (dispatch) => {
    loadPeople()(dispatch);
    loadPlanets()(dispatch);
  };
}

../util/swapi 处理从LocalStorage或发出请求中获取人和地球的数据。

initApp()动作创建者在site.js渲染到DOM之前调用其他动作创建者，如下所示：

site.js

import React from 'react';
import {render} from 'react-dom';
import Root from './containers/root';
import configureStore from './store/configure-store';
import {initApp} from './actions';

const store = configureStore();

// preload data
store.dispatch(initApp());

render(
  <Root store={store} />,
  document.querySelector('#root')
);

1.在Redux中管理应用程序的全局预加载状态的最佳实践是什么？

2.是否loaded需要在商店中具有全局状态？

3.什么是loaded在多个React组件中检查应用程序状态的可扩展方式？对于只需要知道全局应用程序状态并且不处理或的容器，包含People和Planet声明容器似乎是不正确的。同样，在多个容器中何时需要全局状态时，这将很痛苦。People``Planets``loaded

引用Redux中Dan的回答的一部分-多家商店，为什么不呢？题。

通过使用化简器组成，通过编写一个化简器以附加信息并按特定顺序手动调用其他化简器，可以轻松地在Flux中实现“依赖更新”。

4. Dan通过调用其他减速器来表示嵌套的减速器吗？

阅读 258

2020-07-22

共1个答案

小编典典

首先，让我纠正您的示例。

代替

export function initApp () {
  return (dispatch) => {
    loadPeople()(dispatch);
    loadPlanets()(dispatch);
  };
}

你可以（应该）写

export function initApp () {
  return (dispatch) => {
    dispatch(loadPeople());
    dispatch(loadPlanets());
  };
}

您无需将其dispatch作为参数传递-笨拙的中间件会解决这个问题。
当然，从技术上讲，您的代码是有效的，但我认为我的建议更容易理解。

在Redux中管理应用程序的全局预加载状态的最佳实践是什么？

您在做什么似乎是正确的。没有特定的最佳做法。

在商店中是否需要全局加载状态？

不会。正如David在回答中所指出的那样，最好不要只存储必要的状态。

3.
在多个React组件中检查应用程序加载状态的可扩展方式是什么？对于仅需要了解全局应用程序状态并且不处理People或Planets渲染的容器，将People
and Planet状态包括在内似乎是不正确的。同样，在多个容器中何时需要全局加载状态时，这也很麻烦。

如果您担心重复，请创建一个“选择器”功能并将其放置在您的精简器旁边：

// Reducer is the default export
export default combineReducers({
  planets,
  people
});

// Selectors are named exports
export function isAllLoaded(state) {
  return state.people.loaded && state.planets.loaded;
}

现在，您可以从组件中导入选择器，并mapStateToProps在任何组件中的函数中使用它们：

import { isAllLoaded } from '../reducers';

function mapStateToProps(state) {
  return {
    loaded: isAllLoaded(state),
    people: state.people.items,
    planets: state.planet.items
  };
}

Dan通过调用其他reducer是否意味着调用嵌套的reducer？

是的，减速器组成通常意味着调用嵌套的减速器。
请参考我关于这个主题的免费Egghead教程视频：

2020-07-22