How to listen to redux action stream in component

Question

I'm working on a React application that uses the following architecture:

• redux
• typesafe-actions
• redux-observable

My question is: How can I execute an UI action on specific redux action?

For example, suppose we have the following async actions defined with typesafe-actions :

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

An Epic will watch for listTodo.request() and send the API call, then convert the response to a listTodo.success() action. Then the redux reducer will be triggered by listTodo.success() action and store the todo list into redux store.

In this setting, suppose I want to do the following things in an component:

• dispatch a listTodo.request() action to retrieve all the actions
• After the async request is done (ie after listTodo.success() action appears in the action stream), redirect the UI to a second path

So my question is, how could I watch the action stream and react to the listTodo.success() action?

UPDATE: To avoid being too specific, we can think of another case. I want to simply display an alert with window.alert() after listTodo.success() appears in the action stream. Or simply console.log() , or whatever that changes local state (instead of global redux state). Is there a way to implement that?

UPDATE 2: There is a similar question here , but for Angular w/ ngrx. What I want to do is exactly the thing described in above post, but in React / redux-observable fashion:

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

With redux the components update based on state.

If you want to update a component based on an action than you update the state in the reducer, such as setting {...state, success: true} in the reducer. From there you simply read the state into your component as you normally would and if the state is changing to success than you show your window.

Answer 2

Might be a little late but I solved a similar problem by creating a little npm module. It allows you to subscribe to and listen for redux actions and executes the provided callback function as soon as the state change is complete. Usage is as follows. In your componentWillMount or componentDidMount hook:

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

Detailed documentation can be found at https://www.npmjs.com/package/redux-action-watcher

Answer 3

我觉得对话应该是一个副作用，所以你会把它们放在史诗中