ngrx/store after action/effects UI notification

Question

I am using ngrx/store and ngrx/effects.

This is the flow,

1. user click login button
2. LOGIN Action dispatched
3. $effects perform http.post credentials for login
4. dispatch LOGIN_SUCCESS or LOGIN_FAILURE Action

Question: I would like to perform some UI task, eg, pull down the modal, or show a pop up of the error message, after the action.

How would I go about subscribing to the response in my component?

Thanks guys.

Answer 1

Your state should have a flag that would notify your component that it should do an action.

Something like this:

State:

const initialState: SomeState = {
    loggedIn: false,
    ...
};

export default function(state = initialState, action: Action): SomeState {
    switch (action.type) {
        case StateActions.LOGIN_SUCCESS:
            return Object.assign({}, state, {loggedIn: true});
            ...

Then in your component you subscribe to the state and if loggedIn is true you know that you should for example show the modal.

Another approach would be to perform the task right in your effect through a service.