D'attente pour l'action à effectuer dans Réagissent Redux

Je suis nouveau sur react et redux et examiner comment elle est différente de angular.

Je suis en train de faire une simple page de connexion et je ne suis pas en mesure de réaliser ce que je veux. Une fois que je reçois le nom d'utilisateur et le mot de passe à partir d'un formulaire de connexion, j'ai le présenter comme ci-dessous :

  submitHandler(e){
    e.preventDefault();
    var user = {
      name : this.state.username,
      password: this.state.password
    }
    this.props.authenticateUser(user);
    browserHistory.push('/home');
    this.setState({
      username:'',
      password:''
    })
  }

Ici, authenticateUser est une fonction à l'intérieur de mon réducteur (voir ci-dessous) qui permet de vérifier à partir d'un déjà existant de l'utilisateur de la liste, puis de l'état, de la propriété isAuthenticated :

 case 'AUTHENTICATE_USER':
        var users = state.userslist;
        var payloadUser = action.payload;
        for (let i = 0; i < users.length; i++) {
            let user = users[i]
            if (user.name === payloadUser.name) {
                return {...state, isAuthenticated: true };
            }
        };
        return {...state, isAuthenticated: false };

Maintenant Angulaire, je voudrais juste attendre cet appel à la finition et de vérifier si cette valeur est true ou false, et accédez à la page d'accueil à l'aide de angular-router.

Mais comment pourrais-je obtenir le même dans react. Je suis à l'aide de react-router dans mon exemple d'application.

J'ai essayé de vérifier isAuthenticated dans mon submitHandler fonction juste en dessous de là où j'appelle this.props.authenticateUser(user) , mais le problème est , this.props.isAuthenticateUser n'est pas mis à jour et renvoie false, que j'ai défini comme initialState dans mon réducteur.

S'il vous plaît dites-moi comment je peux vérifier isAuthenticated après la authenticateUser fonction a appelé pour que je puisse poursuivre ma page d'accueil de routage. Dois-je utiliser un promise et d'attendre que l'etat mis à jour par redux puis vérifier de nouveau ?? (Je sais de réagir est une façon de le chemin et il ne fonctionne pas de cette façon.)

Aussi si mon authentification échoue, comment puis-je afficher une erreur du panneau en dessous de mon formulaire de connexion. Je pense que l'utilisation d'une composante de l'erreur du panneau qui prend en isAuthenticated en entrée et en vérifiant si la valeur est false, afin de montrer (ie. ngShow comme dans Angulaire.) Mais j'ai peur que ça ne marchera pas, car mon état ne sera pas mis à jour juste à temps.

Je sais que la fonction rendu sera appelé à un changement d'état. Mais j'ai juste ne peut pas envelopper la tête autour de Réagir clairement.

Modifier: Pour des raisons de concision, je n'ai pas fourni l'action des créateurs et de la pleine réducteur au-dessus plutôt montré seulement l'interrupteur en cas de fonctionnement pour authentifier l'utilisateur. Mon application suit l'original redux de l'architecture avec des actions, des réducteurs, des conteneurs, des composants et des.

EDIT: Github lien ici

OriginalL'auteur v1shnu | 2017-02-05