在 React/Redux 中更改异步操作完成的路线答案

【问题标题】：Change route on async action finish in React/Redux在 React/Redux 中更改异步操作完成的路线
【发布时间】：2018-08-10 21:09:52
【问题描述】：

我正在使用 React、Redux 和 react-router。我有一个“添加成员”按钮，它使用 react-router 打开一个“新成员”表单。

在“应用程序容器”中，我有这个：

<Switch>
    //other stuff
    <Route exact path='/addmember' component={ NewMemberForm }/>
</Switch>

和按钮：

<Button label='Add member' onClick={ _ => this.props.history.push('/addmember')} />

表单已正确打开。 NewMemberForm 组件有两个按钮：Add 和 Cancel。 Cancel 按钮，基本上，this.props.history.push('/') 会返回首页。

当用户点击Add时，会读取表单数据并调度异步操作：

//add member using the api and set the generated ID
export const requestAddMember = member => dispatch => {
  return api.addMember(member)
    .then(memberId => dispatch(
      addMember(Object.assign(member, { id: memberId }))));
};

const addMember = member => {
  return { type: ADD_MEMBER, member };
};

我需要返回主页 (this.props.history.push('/'))，当 ADD_MEMBER 动作被调度时，即当新成员被实际添加时。

我什么时候必须处理该操作并致电this.props.history.push('/')？是否应该在调度ADD_MEMBER之前在异步操作创建者中？

//add member using the api and set the generated ID
export const requestAddMember = member => dispatch => {
  return api.addMember(member)
    .then(memberId => dispatch( // should it be here before this dispatching?
      addMember(Object.assign(member, { id: memberId }))));
};

【问题讨论】：

你可以把它放在.then()。在一天结束时，您的路线可能会在您的减速器更新状态之前更改。但是一旦状态更新，您的组件应该使用更新的状态重新呈现，所以它应该不重要。如果您担心在状态更新之前路由，请考虑等待路由，直到您期望的值被添加到状态。
为什么不订阅NewMemberForm 的会员？添加新的后，重定向主页。
@Galupuf 我怎么能等到呢？我应该如何检查它？
@Alex 如何订阅数组？
@Héctor 使用react-redux，相当简单；你可以使用connect function。

标签： reactjs redux react-router

【解决方案1】：

我找到了一个可行的解决方案。

history.js

import createHistory from 'history/createHashHistory'
export default createHistory()

在动作创建者中：

actions.js

import history from './history';

...

//add member using the api and set the generated ID
export const requestAddMember = member => dispatch => {
  return api.addMember(member)
    .then(memberId => {
        history.push('/'); //this line
        dispatch(addMember(Object.assign(member, { id: memberId })))
    });
};

【讨论】：