로그인을 기반으로 한 Redux 비동기 작업

Question

내 actions.js 파일에 다음 조치가 있습니다. 그러나 "작업이 일반 개체 여야합니다. 비동기 작업에 사용자 지정 미들웨어를 사용하십시오."라는 오류 메시지가 나타납니다. 나는 그것을 이상한 곳으로 돌려주기 때문이라고 가정하고있다. 어떤 아이디어?

export function loginLookUp(credentials) { 
    const request = axios.post(`${LOGINLOOKUP_URL}`, credentials).then(function (response) { 

     return { 
      type: LOGIN_SUCCESS, 
      payload: true 
     }; 


    }) 
    .catch(function (error) { 

     return { 
      type: LOGIN_FAIL, 
      payload: false 
     }; 


    }); 


} 

Answer 1

조치 작성자는 아무 것도 리턴하지 않습니다. 리턴 명령문은 주변 기능이 아닌 promise 콜백의 범위에 있습니다. 그러나 그것은 요점 옆에있는 것입니다. 액션 창작자로부터 약속을 되 돌렸을지라도 Redux는 그걸로 무엇을해야할지 모를 것입니다!

비동기 작업을 수행하려면 redux-thunk 또는 redux-promise과 같은 라이브러리를 사용해야합니다. 이 라이브러리를 설정하는 방법에 대해 자세하게 설명하지는 않겠다. 레포지에있는 README 파일이 훨씬 더 훌륭하게 작동하기 때문이다. 그러나 사용 방법에 대한 몇 가지 예가있다. 그 장을 제공해야합니다 -

export function loginLookUp(credentials) { 
    // This would look a lot cleaner if you used an ES2015 arrow function 
    return function (dispatch) { 
     const request = axios.post(`${LOGINLOOKUP_URL}`, credentials).then(function (response) { 
      dispatch({ 
       type: LOGIN_SUCCESS, 
       payload: true 
      }); 
     }) 
     .catch(function (error) { 
       dispatch({ 
        type: LOGIN_FAIL, 
        payload: false 
       }); 
     }); 
    } 
} 

이 비동기 작업을 얻을만큼이나 간단하고, it's how the official Redux tutorial will teach you to do it :

REDUX-썽크 당신과 같이 차례로 dispatch에 액세스 할 수있는 기능을 파견 할 수 있습니다 읽기, 정말 도움이되는 물건! , 그것은 기다릴 .then()를 사용

export function loginLookUp(credentials) { 
    return { 
     type: LOGIN, 
     // Payload must be a promise! 
     payload: axios.post(`${LOGINLOOKUP_URL}`, credentials) 
    }; 
} 

보다는 즉시 감속기에 전달되는 작업 :

REDUX-약속은, 다른 한편으로는, 당신이 페이로드로 약속 작업을 파견 할 수 있습니다 완료하려면 탑재량을 약속하십시오. 그런 다음 두 가지 형태 중 하나로 조치를 전달합니다.

약속이 해결되면 작업이과 같이, 해결 된 값으로 설정 페이로드로 발송됩니다 약속이 실패

{ 
    type: LOGIN, 
    payload: // The response from the server 
} 

경우, 작업이 거부로 설정 페이로드로 파견 될 것이다 true로 설정 값과 error 재산과 같이 :

{ 
    type: LOGIN, 
    payload: // The error object, 
    error: true 
} 

이 더는 일을하는 유일한 방법을 의미가 없다 -이 모두는 공포에 반동했다, 거기가 바인딩 있다면, 그래서 수많은 비동기 액션 라이브러리가있다 뭔가가되다. 그 외에는 당신에게 어울립니다 (나는 redux-saga에 관해 나보다 똑똑한 사람들에게서 정말로 좋은 것을 듣지만, 나는 그것을 스스로 이해할 수 없다)!

무용담에 대해 말하자면이 대답은 내가 의도 한 것보다 길게 끝났습니다. 잘하면 그것은 당신을 위해 물건을 지워!