2017-10-11 54 views
0

我是REDX新手,正在開發應用程序。我的登錄和註冊功能幾乎可以正常工作,但事實上如果發現某些不正確的操作並且無法找到哪部分代碼正在執行此操作。下面我張貼一些代碼片段。發出錯誤的REDX操作

看看第二個鬼魂LOGIN_FULFILLED請求,它不應該發生,因爲我沒有該數據庫中的用戶呢! Screenshot for the actions and state transitions

登錄行動的創作者:

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}); 
      }) 
    } 
} 
+0

嘿。在你分享的屏幕截圖中有2個動作發出:'LOGIN_REJECTED'和'LOGIN_FULFILLED'應該只有一個動作發出了嗎? –

+0

但它是在if - else循環中,所以它應該觸發基於來自服務器的響應消息。 –

+0

您是否在使用redux-thunk?我猜不會。你能發佈完整的動作創作者功能嗎? –

回答

0

終極版咚中間件允許你寫行動創造者返回而不是操作的功能(如寫在official guide)。

您需要做一些改變才能使用thunk。您無需輸入store即可使用getStatedispatch,因爲它們是論據callback

return function(dispatch, getState) 

dispatchgetState是相同store.dispatchstore.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 
 
     }); 
 
     }) 
 
    } 
 
}