Redux - 管理预加载状态 [英] Redux - managing preload state

问题描述

我正在构建一个应用程序，我需要预加载人和 planet 数据（它是可能在将来启动应用程序时可能会添加更多预加载要求）。我希望在商店中有值表示应用程序的全局状态为已加载：< boolean> 。只有当预加载要求 people.loaded：true 和 planet.loaded：true 为真时，该值才为true 。商店看起来像这样：

I'm building an application, where I need to preload people and planet data (it's likely that in the future more preload requirements may be added) on launch of the application. I want to have value in the store that represents the global state of the app as loaded: <boolean>. The value would be true only then when the preload requirements people.loaded: true and planet.loaded: true are true. The store would look something like this:

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

单独的行动创建者提出所需的异步请求和由 People 和 Planets reducer处理的调度操作。如下所示（使用 redux-thunk ）：

Separate action creators make the needed async requests and dispatch actions which are handled by the People and Planets reducers. As shown below (uses 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或发出请求获取人员和行星数据。

../util/swapi handles fetching people and planet data either from LocalStorage or making a request.

initApp（）行动创建者在渲染到DOM之前调用 site.js 中的其他动作创建者，如下所示：

initApp() action creator calls other action creators within site.js just before rendering to DOM as shown below:

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。在商店中有必要的全球加载状态吗？

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

3。在多个React组件中检查app 已加载状态的可扩展方法是什么？包含人似乎不正确 code>和 Planet 只需要知道全局应用程序状态且不处理人物或行星。当多个容器中需要全局加载状态时，管理也会很痛苦。

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.

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

Quoting part of Dan's answer from Redux - multiple stores, why not? question.

使用reducer组合可以轻松实现依赖更新，并在Flux中通过手动编写减速器来调用其他减速器以及其他信息来实现特定订单。

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是否通过调用其他reducers来调用嵌套的reducers？

推荐答案

首先，让我更正你的例子。

First, let me correct your example.

而不是

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

你可以（并且应该）写

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

您无需传递 dispatch 作为参数 - thunk中间件处理这个问题。

当然技术上你的代码是有效的，但我认为我的建议更容易。

You don’t need to pass dispatch as an argument—thunk middleware takes care of this.
Of course technically your code is valid, but I think my suggestion reads easier.

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

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

What you’re doing seems correct. There are no specific best practices.

1. 商店中是否有全局加载状态必要吗？

没有。正如David在他的答案中所说，你最好只存储必要的状态。

No. As David notes in his answer, you’re better off storing only necessary state.

1. 在多个React组件中检查应用程序加载状态的可扩展方法是什么？将People和Planet状态包含在仅需要了解全局应用程序状态且不处理人物或行星渲染的容器中似乎是不对的。当多个容器中需要全局加载状态时，管理也会很痛苦。

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

If you’re concerned about duplication, create a "selector" function and place it alongside your reducers:

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

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

Now you can import selectors from your components and use them in mapStateToProps function inside any component:

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

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

1. Dan是否通过调用其他reducer来调用嵌套的reducers？

是的，通常减速器组成意味着调用嵌套的reducer。

请参考我关于这个主题的免费Egghead教程视频：

Yes, reducer composition usually means calling nested reducers.
Please refer to my free Egghead tutorial videos on this topic:

• 带阵列的Reducer组合


• 带物体的减速器组合物


• Reducer Composition with combineReducers（）


• 实现 combineReducers（）来自Scratch

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

这篇关于Redux - 管理预加载状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！