react redux를 사용하여 상태가 변경되지 않았습니다.

Question

react native와 redux를 사용하여 로그인 페이지를 구현하고 있습니다. 내 감속기에 대한 샘플 코드는 다음과 같습니다. 세 가지 유형이 있습니다. 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 submitLogin(loginStatus, errorMessage){ 
    return { 
    type: SUBMIT_LOGIN, 
    loginStatus, 
    errorMessage 
    } 
} 

는 그런 다음 해당 작업을 파견 결국 것이다 비동기 작업을 만듭니다 간단한 작업을 정의합니다

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

그런 다음 감속기에서 간단한 액션을 기반으로 상태를 업데이트하는 훨씬 간단한 액션을 작성할 수 있습니다. 코드에서 사용하는 모든 곳에서 썽크 액션 작성자를 가져 오려고 할 것입니다.