react reduxを使用して状態が変更されない

Question

私はreact nativeとreduxを使用してログインページを実装しています。ここに私のレデューサーのためのサンプルコードがあります。 3つのタイプがあります。 types.SCHMIT_LOGIN、types.CHANGE_USERNAME、types.CHANGE_PASSWORD。

CHANGE_USERNAMEとCHANGE_PASSWORDは正常に動作しています。しかし、問題はSUBMIT_LOGINです。私はそれが非同期状態の変更のためだと思います。とにかくfetch（）メソッドを使用した後に状態を変更するには？

export default function login(state = initialState, action = {}) { 
    switch (action.type) { 
    case types.SUBMIT_LOGIN: { 
     let loginStatus = false; 

     if (state.username != null && state.password != null 
     && state.username.length > 0 && state.password.length > 0 
     && state.username === state.password) { 
     loginStatus = true; 
     } else { 
     let updatedErrMsg = ''; 
     fetch('https://staging-barrie.mpower.ca/mpower/mpp/weblogin2.action?username='+state.username+'&password='+state.password, 
     { 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36', 
     }, 
     } 
    ) 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     if (responseJson.result === 'success') { 
      loginStatus = true; 
     } else { 
      loginStatus = false; 
      updatedErrMsg = 'Incorrect Username or Password.'; 
     } 
      return { 
      ...state, 
      isLoggedIn: loginStatus, 
      errorMsg: updatedErrMsg 
      }; 
     }); 
     } 
     return { 
     ...state, 
     isLoggedIn: loginStatus 
     }; 

    } 

    case types.CHANGE_USERNAME: 
    return { 
     ...state, 
     username: action.username 
    }; 

    case types.CHANGE_PASSWORD: 
    return { 
     ...state, 
     password: action.password 
    }; 

    default: 
    return state; 

}}

Answer 1

あなたは減速内の非同期呼び出しを使用しないでください。非同期呼び出しを行う別のメソッドが必要です。呼び出しが完了すると、それに応じてアクションが送出されます（SUBMIT_LOGIN）。

は別々の機能を維持し、要求がこの

function loginUser() { 
    let loginStatus = false; 

    if (state.username != null && state.password != null 
     && state.username.length > 0 && state.password.length > 0 
     && state.username === state.password) { 
     loginStatus = true; 
     } else { 
     let updatedErrMsg = ''; 
     fetch('https://staging-barrie.mpower.ca/mpower/mpp/weblogin2.action?username='+state.username+'&password='+state.password, 
     { 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36', 
     }, 
     } 
    ) 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     if (responseJson.result === 'success') { 
      loginStatus = true; 
     } else { 
      loginStatus = false; 
      updatedErrMsg = 'Incorrect Username or Password.'; 
     } 
     // Request is complete so dispatch an action. 
     dispactch({type: types.SUBMIT_LOGIN, payload: {loginStatus,updatedErrMsg }}) 
     }) 
} 

ときれいなあなたの減速を保つように完了したときにアクションを派遣します。

https://github.com/gaearon/redux-thunk：それは私はあなたがサンクミドルウェアを使用することによって、これを達成できると信じてaction.type

export default function login(state = initialState, action = {}) { 
    switch (action.type) { 
    case types.SUBMIT_LOGIN: 
    return { 
     ...state, 
     isLoggedIn: action.payload.loginStatus, 
     errorMsg: action.paylod.updatedErrMsg 
    }; 

    case types.CHANGE_USERNAME: 
    return { 
     ...state, 
     username: action.username 
    }; 

    case types.CHANGE_PASSWORD: 
    return { 
     ...state, 
     password: action.password 
    }; 

    default: 
    return state; 

Answer 2

に応じて新しい状態を返す必要があります。

これを使用すると、最終的に状態を更新するアクションをディスパッチする非同期アクションクリエイターを作成できます。減速機に供給する前にアクションを作成することで、あなたがここにいるすべての問題を回避する必要があります。

まず、あなたは、あなたが引数

const thunk =()=>{ 
    return (dispatch, getState)=> { 
    <async action goes here> 
    dispatch(submitLogin(loginStatus, errorMessage)); 
    } 
} 

としてあなたフェッチの結果を渡し、最終的にはそのアクションを派遣する非同期アクションを作成しますシンプルなアクション

const submitLogin(loginStatus, errorMessage){ 
    return { 
    type: SUBMIT_LOGIN, 
    loginStatus, 
    errorMessage 
    } 
} 

を定義しますあなたは、単純なアクションに基づいて状態を更新するあなたの減速機ではるかに簡単なアクションを構築することができます。あなたがあなたのコードでそれを使用している場合はどこにでも、サンクアクションクリエイターをインポートするでしょう。