1 
 export const getSomethingEpic = action$ =>
  action$
    .ofType(GET_SOMETHING)
    .switchMap(action =>
      ajax('url/api/something')
        .map((json) => {
          return getSomethingEndAct(json.response);
        })
        .takeUntil(action$.ofType('@@router/LOCATION_CHANGE'))
    );

情况是这样的：

页面 A 有一个反应路由器链接到页面 B，在页面 B 上 componentDidMount 我调度 getSomething 动作。Ajax 可以完美取消。但是，如果页面 B 加载完成，ajax 完成，我们从页面 B 路由到页面 C，然后使用浏览器返回按钮再次路由到页面 B，action getSomething 将再次在 componentDidMount 中调度，但这次 ajax 被取消.

我不明白为什么要取消 ajax，因为位置更改是在 getSomething 操作之前。或者当路由改变时我应该怎么做才能取消ajax？

我尝试构建一个示例，但我无法让 react-router-redux 同步浏览器历史记录。这里是http://jsbin.com/dewixurece/edit?js,console,output 如果使用 hashHistory 它将工作，但会有两个位置更改操作，应该是一个，我不知道为什么。

这是一个很棒的库，我真的很喜欢 RX 编程理念，但仍在学习，希望我们能有更多的例子。谢谢，如果有人可以帮忙。

4

1 回答 1

1

（基于我们在评论中的讨论）

如果您想在输入路由时开始请求，但如果您在完成之前离开该路由则取消它，您将调度 start 动作componentDidMount和取消动作componentWillUnmount

const getSomethingEpic = action$ =>
  action$.ofType('GET_SOMETHING')
    .switchMap(action =>
      ajax('url/api/something')
        .map((json) => {
          return getSomethingEndAct(json.response);
        })
        .takeUntil(action$.ofType('GET_SOMETHING_CANCELLED'))
    );

class B extends Component {
  componentDidMount() {
    store.dispatch({
      type: 'GET_SOMETHING'
    });
  }

  componentWillUnmount() {
    store.dispatch({
      type: 'GET_SOMETHING_CANCELLED'
    });
  }

  render() {
    return (
      <h1>B route</h1>
    );
  }
}

演示： http: //jsbin.com/zomire/edit ?js,output

为了简单起见，我只是store.dispatch直接使用。connect()如果您愿意，可以使用动作创建器和/或在您的真实应用程序中。

调度取消操作，即使 ajax 请求已经完成，通常也不是问题——但如果是这样，或者您更愿意只在真正需要时调度它，您将需要存储某种可以使用的状态了解请求是否仍在等待中。您可以将此状态存储为本地组件状态或在 redux 存储中。

于 2017-03-03T02:35:35.847 回答