等待操作以更新 react-native 和 redux 中的状态

Question

我有一个简单的 react-native 应用程序，并设置了 redux 商店。基本上我想添加一个新故事，调度 redux 动作并在它创建后过渡到这个新故事。

我的容器组件中有以下代码，它在用户点击add 按钮时运行。

 addStory() {
    this.props.actions.stories.createStory()
      .then(() => Actions.editor({ storyId: last(this.props.stories).id }); // makes the transition)
  }

还有下面的动作创建者。

export const createStory = () => (dispatch) => {
  dispatch({ type: CREATE_STORY, payload: { storyId: uniqueId('new') } });
  return Promise.resolve();
};

如您所见，我在动作创建器中返回了一个承诺。如果我在这里不返回承诺，则转换将在 状态更新之前进行。

这对我来说似乎有点奇怪 - 为什么我必须在这里返回一个已解决的 Promise？分派不应该是同步的吗？

Answer 1

如 cmets 中所述

回调示例：

addStory() {
    this.props.actions.stories.createStory( (id) => {
        Actions.editor({ storyId: id })
    });
}
export const createStory = ( callback ) => (dispatch) => {
    const _unique_id = uniqueId('new');
    dispatch({ type: CREATE_STORY, payload: { storyId: _unique_id } });
    callback(_unique_id);
};

超时示例： 在这里，我们假设状态现在已经更新了.. 大多数时候情况并非如此。

addStory() {
    this.props.actions.stories.createStory()
    setTimeout( () => {
        Actions.editor({ storyId: last(this.props.stories).id });
    }, 500);
}
export const createStory = () => (dispatch) => {
    dispatch({ type: CREATE_STORY, payload: { storyId: uniqueId('new') } });
};

承诺： 这可能需要几秒钟或一分钟才能完成..没关系。你在这里做了所有你必须做的事情并最终解决它，以便应用程序/组件可以执行下一步操作。

export const createStory = () => (dispatch) => {
    return new Promise( (resolve, reject) => {
        // make an api call here to save data in server
        // then, if it was successful do this
        dispatch({ type: CREATE_STORY, payload: { storyId: uniqueId('new') } });
        // then do something else
        // do another thing
        // lets do that thing as well
        // and this takes around a minute, you could and should show a loading indicator while all this is going on
        // and finally
        if ( successful ) {
            resolve(); // we're done so call resolve.
        } else {
            reject(); // failed.
        }
    });
};

现在，结帐http://reactivex.io/rxjs/