2016-12-17 1 views
1

React, Redux 및 JS에 처음으로 익숙합니다. 나는 다른 사람들이 어떻게 파견하고 행동을 취할 수 있는지 알고 싶다 - 올바른 방법으로 약속한다. 내 코드는 실제로 작동하지만 오류가 계속 발생합니다.Redux 작업 연결

readingActions.js?14b9:56 Uncaught (in promise) TypeError: dispatch(...).then is not a function(…) 

이것은 내 설정입니다.

  • 이것은 내가 행동을 시작하고 경고가 발생한 곳입니다.

당신은 내가 제대로 동작을 트리거하는 방법을 잘 모릅니다 때문에 문제가, 그 때는에 볼 수 있듯이

export function createReading(reading) { 
    return function (dispatch) { 
    dispatch({type: CREATE_READING}); 
    return request(
     `${API_URL}new`, {method: 'POST', body:JSON.stringify(reading)}, 
     (json) => {(dispatch({type: CREATE_READING_SUCCESS, res: json}).then(dispatch(Notifications.success(showSuccess(json.book.title)))))}, 
     (json) => { dispatch({type: CREATE_READING_ERROR400, res: json}).then(dispatch(Notifications.error(showError(json.error)))) }, 
     (res) => { dispatch({type: CREATE_READING_ERROR500, res: res}) }, 
     (ex) => { dispatch({type: CREATE_READING_FAILURE, error: ex}) }, 
    ) 
    } 
} 
.

  • 또한 그렇게 보이는 내 도우미 함수입니다 요청 볼 수 있습니다 (I 토큰 추가 여기를, 다른 응답을 반환) :

    export function request(url, options, success, error400, error, failure) { 
        let headers = new Headers(); 
        headers.append("Content-Type", "application/json") 
        headers.append("Accept", "application/json") 
        options["headers"] = headers; 
    
        if (localStorage.jwtToken) { 
         let token = localStorage.jwtToken; 
         headers.append('Authorization', 'JWT '+token); 
        } 
    
        return fetch(url, options) 
         .then(res => { 
          if (res.status >= 200 && res.status < 300) { 
           res.json().then(json => { 
            return success(json) 
           }) 
          } else if (res.status === 400) { 
           res.json().then(json => { 
            return error400(json) 
           }) 
          } else { 
           return error(res) 
          } 
         }).catch((ex) => { 
          return failure(ex) 
         }) 
    } 
    

질문 내가 제대로 실행할 수있는 방법이다. 그렇다면 올바른 방법은 무엇일까요?

답변

1

작업을 체인으로 전달하려는 경우 실제로 직접 구현할 수 있습니다. 이제

조금을 분석 한 후 펜과 종이를 가지고 시작 작동 방법에 대한 기본 알고리즘을 작성하고 당신이 다음에 올 말 : -

이제 볼 위의 경우

dispatch(action) => action returns function => action returns function => action returns an object(here you chain ends)

미들웨어를 만들고 객체를 반환하는 액션을 얻을 때까지 함수를 반환하는 액션을 계속 보냅니다. 이것은 redux-thunk입니다.

그럼에도 불구하고 자신의 무언가를 만들려고해도 배우기에는 그렇게해야하지만 결국에는 썽크 또는 다른 패키지와 같은 것을 만들어 낼 것입니다.

나는 정말로 redux-thunk을 시도한다고 말하고 싶다. 미들웨어 이해를 위해서 나는 redux middleware docs을 확인할 것을 권한다.