redux-observable 动作触发后执行转换

Question

我正在 redux-observable 中使用史诗。

 return action$.ofType('APPLY_SHOPPING_LISTS')
            .flatMap(() => Observable.concat(Observable.of({ type: 'APPLYING_SHOPPING_LISTS' }), Observable.of({ type: 'APPLIED_SHOPPING_LISTS' }).delay(5000);

一旦史诗完成触发 'APPLIED_SHOPPING_LISTS' 我想执行转换，我正在使用 react-router。最好的地方是什么？我看到 redux-history-transitions，这是我应该使用的 add-in 吗？

此外，我确实使用了 redux-history-transitions 并将其更改为以下

return action$.ofType('APPLY_SHOPPING_LISTS')
            .flatMap(() => Observable.concat(Observable.of({ type: 'APPLYING_SHOPPING_LISTS' }), Observable.of({ type: 'APPLIED_SHOPPING_LISTS', meta: {
                        transition: (prevState, nextState, action) => ({
                            pathname: '/Shopping',
                        }),
                    } }).delay(5000);

这似乎确实改变了 url 并发生了转换，但是我在“/Shopping”路径下配置的组件不会呈现。它只是停留在当前页面上。这是我的路线的样子

<Route path='/' component={App}>
    <IndexRoute component={LoginContainer} />
    <Route path='login' component={LoginContainer} />
    <Route path='landing' component={LandingComponent} />
    <Route path='Shopping' component={ShoppingPathComponent} />
</Route>

Answer 1

如果您使用的是 react-router v3 或更早版本，您可以使用中间件让您 push/replace 具有 redux 操作的历史记录，例如 react-router-redux。我不熟悉 redux-history-transitions，但它可能（或可能不）类似地工作。

使用 react-router-redux，这意味着在您希望它发生时发出您想要转换历史记录的操作。

因此您将导入 push 动作创建器，并将其作为另一个动作添加到 APPLIED_SHOPPING_LISTS 之后：

Observable.of(
  { type: 'APPLIED_SHOPPING_LISTS' },
  push('/Shopping')
)

总的来说，是这样的：

import { push } from 'react-router-redux';

const somethingEpic = action$ =>
  action$.ofType('APPLY_SHOPPING_LISTS')
    .flatMap(() => Observable.concat(
      Observable.of({ type: 'APPLYING_SHOPPING_LISTS' }),
      Observable.of(
        { type: 'APPLIED_SHOPPING_LISTS' },
        push('/Shopping')
      )
        .delay(5000)
    ));

如果您使用的是 v4，在撰写本文时 react-router-redux 还不兼容，但它处于活动状态 development here。

redux-observable 动作触发后执行转换

redux-observable perform transition once the action fires

react-router

redux-observable