actions de redux incorrectes expédiées

Question

Je suis nouveau à redux, et de travailler sur une application. Mes fonctionnalités d'ouverture de session et d'inscription fonctionnent presque correctement, sauf le fait que si certaines actions incorrectes sont envoyées et ne sont pas en mesure de localiser quelle partie du code le fait. Ci-dessous, je poste des extraits de code. Regardez le deuxième fantôme LOGIN_FULFILLED Demande, cela ne devrait pas se produire car je n'ai pas encore cet utilisateur dans la BD! Screenshot for the actions and state transitions

créateurs d'action Connexion:

import request from 'axios'; 
import thunk from 'redux-thunk'; 
import store from '../store' 

export function loginFunc(username, password) { 
return { 
type: 'LOGIN', 
username, 
password,  
payload : request 
      .post("http://localhost:5000/users/authenticate", 
       { 
        username : username, 
        password: password 
       } 
      ) 
      .then(function (response) { 
       console.log(response); 
       if (response.data.message === "user_found")      
       store.dispatch({type: 'LOGIN_FULFILLED', payload : response.data.results}); 
       else 
       store.dispatch({type: 'LOGIN_REJECTED', payload : "user_not_found"}); 
      }) 
      .catch(function (error) { 
       console.log(error); 
       store.dispatch({type: 'LOGIN_REJECTED', payload : error}); 
      }) 
    } 
} 

Answer 1

middleware Redux Thunk vous permet d'écrire des créateurs d'action qui renvoient une fonction au lieu d'une action (comme écrit dans official guide).

Vous devez effectuer quelques modifications pour utiliser le thunk. Vous n'avez pas besoin d'importer store pour utiliser getState et dispatch car ils sont arguments au callback.

return function(dispatch, getState) 

Ce dispatch, getState est la même que store.dispatch et store.getState.

import request from 'axios'; 
 

 
export function loginFunc(username, password) { 
 
    return function(dispatch) { 
 
    request 
 
     .post("http://localhost:5000/users/authenticate", { 
 
     username: username, 
 
     password: password 
 
     }) 
 
     .then(function(response) { 
 
     console.log(response); 
 
     if (response.data.message === "user_found") 
 
      dispatch({ 
 
      type: 'LOGIN_FULFILLED', 
 
      payload: response.data.results 
 
      }); 
 
     else 
 
      dispatch({ 
 
      type: 'LOGIN_REJECTED', 
 
      payload: "user_not_found" 
 
      }); 
 
     }) 
 
     .catch(function(error) { 
 
     console.log(error); 
 
     dispatch({ 
 
      type: 'LOGIN_REJECTED', 
 
      payload: error 
 
     }); 
 
     }) 
 
    } 
 
}