I have built applications using both react + redux and angular 2 + redux in the past, but it has always been fun side things that never really mattered, so a lot of how I code it has always been based on my instinct.Now I have a more important application to build. I chose angular2 + redux for this app for the same reasons why any of you would. Things are coming along fine but I have a question on how to best respond to state change.First some context:This is an Angular (2) application using angular-redux/store for the redux bindings and redux-thunk middleware for handling async actionsI have a login component. It logs people in, not with usernames and passwords, but with SMS text message verification. This component calls the API to send a text, and then once the user has received the text they can enter it into the website and the component will call the API to verify the code is correct.Here is the initial code for this component.@Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.less']})export class LoginComponent implements OnInit {  @select(['authentication', 'loading']) loading$: Observable<boolean>;  @select(['authentication', 'mobileAuth', 'codeSent']) codeSent$: Observable<boolean>;  loginFormGroup: FormGroup;  constructor(    private ngRedux: NgRedux<IAppState>,    private fb: FormBuilder,    private authActions: AuthenticationActions    ) { }  ngOnInit() {    this.loginFormGroup = this.fb.group({      phoneNumber: ['', []] //TODO: add validators      ,code: ['', []]    })  }  sendText(){    //TODO: validate phone number/strip unnecessary characters    var phoneNumber = this.loginFormGroup.value.phoneNumber;    this.ngRedux.dispatch(<any>this.authActions.sendAuthTextMessage(phoneNumber));  }  verifyCode(){    var phoneNumber = this.loginFormGroup.value.phoneNumber;    var code = this.loginFormGroup.value.code;    this.ngRedux.dispatch(<any>this.authActions.verifyMobileAuthCode(phoneNumber, code));  }}As you can see in the verifyCode() function, it dispatches a call to the API which looks like this//from AuthentcationActions classpublic verifyMobileAuthCode(phoneNumber: string, code: string){    return (dispatch) => {        dispatch({ type: AuthenticationActions.REQUEST_MOBILE_AUTH_VERIFY_CODE, payload: {} });        this.authService.sentAuthenticationCode({ phoneNumber, code })        .subscribe(result => {            debugger;            dispatch({                type: AuthenticationActions.RESPONSE_MOBILE_AUTH_VERIFY_CODE,                 payload: result            })        }, err=> {            dispatch({                type: AuthenticationActions.ERROR_MOBILE_AUTH_VERIFY_CODE,                payload: err            })        })    }}in the case of a successful call to verify the code, my action then dispatches the AuthenticationActions.RESPONSE_MOBILE_AUTH_VERIFY_CODE with the result of the API call, which may contain a token and some other related data.Now for the question.How, in my component should I receive this payload? The component needs to redirect once the authentication is complete. My initial thought was to @select the property in the AppState object where the token will be stored and then subscribe to it in the login component, re-routing when the token is not null. That just feels so strange to me though so I am not sure if that is right.example of what I am thinking about doing:  @select(['authentication', 'mobileAuth', 'result']) mobileAuthResult$: Observable<any>;//... within some init functionthis.mobileAuthResult.subscribe(x => {    if(x.token){        this.router.redirect(//...)    }})
How to respond to change in a Redux application
angular2;redux