一旦動作觸發，可重複觀察執行轉換

Question

我正在使用可視化與史詩。

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」我想執行的過渡，我使用的反應路由器。什麼是最好的地方做到這一點？我看到了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

如果你使用的反應路由器V3或之前，你可以使用中間件，讓你推/與終極版動作代替歷史，像react-router-redux。我不熟悉redux歷史轉換，但它可能（或不可能）工作類似。

使用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。