Redux-等待诺言时的加载指示器

涉及两个方面：存储和组件表示。

在商店中，每个减速器都应添加一个道具并将其命名为loading。所以减速器的初始状态看起来像

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

接下来，您要调用一个动作并从中检索一个Promise，因此它很简单

componentWillMount() {
  const promise = requestSomething();

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

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

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

和

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

在组件中，只需依靠loadingprop使其呈现加载指示符或实际数据：

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

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

连接功能

connectreact-redux包中的函数包装了一个组件，并允许它从应用程序状态（即每次Provider组件更新时的商店）接收道具。它是反应性的，这意味着每次您分派操作时从上到下。商店通常是一个普通对象（或者它可能是Immutable.js的Map对象，或其他任何对象），通常包含与reduces一样多的属性。

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

$r.props.store.getState()

您可以使用connect功能包装每个受控组件（可以称为容器或视图），以使其接收状态的每次更新，并在该组件的一部分应用程序状态依赖于更改时重新呈现。

例如，让我们假设应用状态为

{
  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该组件的photos.items属性将引用应用程序状态的属性。然后，将应用程序状态的photos.items属性连接到组件的photoListprop：

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函数接受一个或两个参数，在此特定示例中，只有一个参数将组件的prop绑定到应用程序状态的属性。

可能有第二个参数，这是调度功能：

import {
  fetchPhotos
} from 'actions/photos';

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

这是另一个话题。

需要更深入的解释如何connect工作？参见参考。