0

我将 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，这是我应该使用的插件吗？

除此之外，我确实使用了 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>
4

1 回答 1

1

如果您使用的是 react-router v3 或更早版本，则可以使用中间件，它可以让您使用 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 尚不兼容，但它正在积极开发中。

于 2017-05-08T03:42:09.470 回答