promise - Redux - 等待 promise 时加载指示器

Question

我有一个简单的 redux 应用程序，它通过从 api 请求数据来显示文章。我想在等待 promise 时显示“加载”指示器。我该如何实现？

Answer 1

涉及两方:存储和组件表示。

在 store 中，每个 reducer，您应该添加一个 prop 并将其命名为 loading .所以 reducer 的初始状态看起来像

// src/reducers/whatevs.js
const initialState = {
  // whatever
  loading: false
};

然后，使用 connect 将此值传递给容器的 props函数，比如

export default connect(({whatevs}) => ({
  // props you want to use in this container, and
  loading: whatevs.loading
}));

接下来，你想调用一个 Action 并从中检索一个 Promise，所以它很简单

componentWillMount() {
  const promise = requestSomething();

  this.props.dispatch(() => {
    type: LOADING_SOMETHING
  });
  promise.then((smth) => this.props.dispatch(() => {
    type: LOADED_SOMETHING,
    ...smth
  }));
}

因此，首先，您声称您请求了某些东西，因此您正在加载；然后，您声称已收到响应，因此您不再加载。相应的 reducer 看起来像

LOADING_SOMETHING: (state) => ({
  ...state,
  loading: true
})

和

LOADED_SOMETHING: (state, {type, ...smth}) => ({
  ...state,
  ...smth,
  loading: false
})

而在组件中，只需依赖 loading使其呈现加载指示器或实际数据的 Prop :

render() {
  const {loading} = this.props;

  if (loading) {
    return (
      <LoadingIndicator />
    );
  } else {
    return (
      <WhateverComponent />
    );
  }
}

连接功能
connect react-redux 包中的函数包装了一个组件，并允许它在每次 Provider 组件更新时从应用程序状态(即 Store)接收 Prop 。它是被动发生的，这意味着从上到下，每次你调度一个 Action 。 store 通常是一个普通对象(或者它可能是 Immutable.js 的 Map 对象或任何东西)，通常它包含与 reducer 一样多的属性。

您可以使用 React DevTools 检查应用程序状态的值。只需打开它们，突出显示 Provider 组件，然后键入

$r.props.store.getState()

用 connect 包装每个受控组件(可能称为容器或 View )函数使其接收状态的每次更新，并在组件依赖于更改的应用程序状态的一部分时重新渲染。

例如，假设应用程序状态是

{
  authentication: {
    authenticated: null,
    username: null
  },
  photos: {
    items: [],
    favorites: []
  }
}

你有一个组件

export default class Photos extends Component {
  render() {
    const {
      photoList
    } = this.props;

    return (
      <div>{this.renderPhotoList(photoList)}</div>
    );
  }
}

而你真正想要的是 photoList该组件的 prop 将引用 photos.items应用程序状态的属性。然后你连接应用状态的 photos.items组件的 photoList 的属性支柱:

class Photos extends Component {
  render() {
    const {
      photoList
    } = this.props;

    return (
      <div>{doSomethingMeaningful(photoList)}</div>
    );
  }
}

export default connect((state) => ({
  photoList: state.photos.items // remember $r.props.store.getState()?
}))(Photos);

或者，通过一些解构赋值，

export default connect(({photos}) => ({
  photoList: photos.items
}))(Photos);

connect function 接受一个或两个参数，在这个特定的示例中，只有一个参数将组件的 props 绑定(bind)到应用程序状态的属性。

可能还有第二个参数，它是一个调度函数:

import {
  fetchPhotos
} from 'actions/photos';

export default connect(({photos}) => ({
  photoList: photos.items
}), {
  fetchPhotos
})(Photos);

这是一个不同的话题。

需要更深入的解释 connect作品？ See the ref .