如何在組件中監聽 redux 動作流

Question

我正在開發一個使用以下架構的 React 應用程序：

• redux
• typesafe-actions
• redux-observable

我的問題是：如何在特定的 redux 操作上執行 UI 操作？

例如，假設我們使用typesafe-actions定義了以下異步typesafe-actions ：

export const listTodo = createAsyncAction(
  'TODO:LIST:REQUEST',
  'TODO:LIST:SUCCESS',
  'TODO:LIST:FAILURE',
)<void, Todo[], Error>();

Epic 將監視listTodo.request()並發送 API 調用，然后將響應轉換為listTodo.success()操作。 然后 redux reducer 將被listTodo.success()動作觸發並將待辦事項列表存儲到 redux store 中。

在此設置中，假設我想在組件中執行以下操作：

• 調度一個listTodo.request()動作來檢索所有動作
• 異步請求完成后（即在動作流中出現listTodo.success()動作后），將 UI 重定向到第二個路徑

所以我的問題是，我如何觀看動作流並對listTodo.success()動作做出反應？

更新：為避免過於具體，我們可以考慮另一種情況。 在listTodo.success()出現在動作流中之后，我想簡單地顯示一個帶有window.alert()的警報。 或者只是console.log() ，或者任何改變本地狀態（而不是全局 redux 狀態）的東西。 有沒有辦法實現它？

更新2：有一個類似的問題在這里，但對角W / NGRX。 我想要做的正是上面帖子中描述的事情，但是以 React / redux-observable 方式：

import { Actions } from '@ngrx/effects';

@Component(...)
class SomeComponent implements OnDestroy {
    constructor(updates$: Actions) {
        updates$
            .ofType(PostActions.SAVE_POST_SUCCESS)
            .takeUntil(this.destroyed$)
            .do(() => /* hooray, success, show notification alert ect..             
            .subscribe();
    }

}

Answer 1

使用 redux 組件根據狀態更新。

如果你想根據一個動作更新一個組件而不是更新reducer中的狀態，比如在reducer中設置{...state,success:true}。 從那里您只需像往常一樣將狀態讀入您的組件，如果狀態變為成功，則顯示您的窗口。

Answer 2

可能有點晚了，但我通過創建一個小的 npm 模塊解決了類似的問題。 它允許您訂閱和偵聽 redux 操作，並在狀態更改完成后立即執行提供的回調函數。 用法如下。 在您的 componentWillMount 或 componentDidMount 鈎子中：

 subscribeToWatcher(this,[
      {  
        action:"SOME_ACTION",
        callback:()=>{
          console.log("Callback Working");
        },
        onStateChange:true
      },
    ]);

詳細文檔可以在https://www.npmjs.com/package/redux-action-watcher找到

Answer 3

我覺得對話應該是一個副作用，所以你會把它們放在史詩中