Redux - 等待承诺时加载指示器

时间:2016-03-13 20:26:46

标签: promise redux

我有一个简单的redux应用程序,它通过从api请求数据来显示文章。我想显示" loading"等待承诺的指标。我该如何实现呢?

1 个答案:

答案 0 :(得分:4)

涉及两方:商店和组件代表。

在商店中,每个reducer,你应该添加一个道具并称之为loading。因此,reducer的初始状态看起来像

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

然后,使用connect函数将此值传递到容器的道具中,例如

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

在组件中,只需依靠loading prop使其呈现加载指示符或实际数据:

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

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

连接功能

react-redux包中的connect函数包装一个组件,并允许它在每个Provider组件更新时从应用程序状态(即Store)接收props。每当您发送一个动作时,它都会被动地发生,这意味着从上到下。商店通常是普通对象(或者可能是Immutable.js的Map对象,或任何东西),通常包含与reducers一样多的属性。

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

即可
$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 prop会引用app状态的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函数接受一个或两个参数,在这个特定的例子中,只有一个参数将组件的道具绑定到app状态的属性。

可能有第二个参数,它是dispatch的函数:

import {
  fetchPhotos
} from 'actions/photos';

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

这是一个不同的主题。

需要对connect如何运作进行更深入的解释? See the ref