javascript - Redux - 管理预加载状态

Question

我正在构建一个应用程序，我需要在其中预加载 people和 planet应用程序启动时的数据(将来可能会添加更多预加载要求)。我想在代表应用程序全局状态的商店中拥有值(value) loaded: <boolean> .只有当预加载要求 people.loaded: true 时，该值才会为真和 planet.loaded: true是真的。商店看起来像这样:

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

单独的 Action 创建者发出所需的异步请求和分派(dispatch) Action ，这些 Action 由 People 处理和 Planets reducer 。如下图(使用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() Action 创建者调用 site.js 内的其他 Action 创建者就在渲染到 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 state 在多个 React 组件中？ 包含 People 似乎不对和 Planet只需要知道全局应用程序状态而不处理 People 呈现的容器的状态或 Planets .当全局 loaded 时，管理起来也会很痛苦。多个容器中需要状态。

---

引用丹的部分回答Redux - multiple stores, why not?问题。

Using reducer composition makes it easy to implement "dependent updates" a la waitFor in Flux by writing a reducer manually calling other reducers with additional information and in a specific order.

<强>4。 Dan 调用其他 reducer 是否意味着调用嵌套的 reducer？

Answer 1

首先，让我纠正一下你的例子。

代替

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

你可以(也应该)写

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

你不需要将 dispatch 作为参数传递——thunk 中间件会处理这个。
当然，从技术上讲，您的代码是有效的，但我认为我的建议更容易阅读。

---

1. What are the best practices for managing global preload state of the application in Redux?

你所做的似乎是正确的。没有具体的最佳实践。

2. Is having a global loaded state in the store necessary?

没有。正如大卫在 his answer 中指出的那样，你最好只存储必要的状态。

3. What would be a scalable way of checking app loaded state in multiple React components? It doesn't seem right to include People and Planet state for containers that just needs to know the global app state and doesn't handle rendering of People or Planets. Also that would be painful to manage when the global loaded state would be needed in multiple containers.

如果您担心重复，请创建一个“选择器”函数并将其放在您的缩减器旁边:

// 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
  };
}

4. Does Dan by calling other reducers mean calling nested reducers?

是的，reducer 组合通常意味着调用嵌套的 reducer。
请参阅我关于此主题的免费 Egghead 教程视频:

• Reducer Composition with Arrays
• Reducer Composition with Objects
• Reducer Composition with combineReducers()
• Implementing combineReducers() from Scratch