inkorrekte Reductionsaktionen werden gesendet

Question

Ich bin neu in Redux und arbeite an einer Anwendung. Meine Anmelde- und Anmeldungsfunktionalitäten funktionieren nahezu einwandfrei, mit Ausnahme der Tatsache, dass einige falsche Aktionen ausgeführt werden und nicht in der Lage sind, den Teil des Codes zu finden, der sie ausführt. Im Folgenden poste ich einige Code-Snippets.

Betrachten Sie den zweiten Geist LOGIN_FULFILLED Anfrage, sollte es nicht auftreten, wie ich diesen Benutzer in der DB noch nicht habe! Screenshot for the actions and state transitions

Anmelden Aktion Schöpfer:

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

Redux Thunk Middle Sie Aktion Schöpfer schreiben können, die eine Funktion statt einer Aktion zurückkehren (wie in official guide geschrieben).

Sie müssen einige Änderungen vornehmen, um thunk zu verwenden. Sie müssen store nicht importieren, um getState und dispatch zu verwenden, da diese Argumente zu callback sind.

return function(dispatch, getState) 

Diese dispatch, getState ist die gleiche wie store.dispatch und 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 
 
     }); 
 
     }) 
 
    } 
 
}