ajax 호출 다음에 redux 상점을 설정하는 방법은 무엇입니까?

Question

내가 무엇을 놓치고 있는지 확실하지 않습니다. console.log은 올바른 data을 인쇄하지만 return 문은 값을 내 redux 저장소로 설정하지 않습니다.

// 내 응용 프로그램의 모든 다른 맥락에서

function getPreviousMonthData(state) { 
    $.ajax({ 
    url: uri, 
    method: "GET", 
    dataType: "json", 
    success: (data) => { 
     const newObj = { 
     previousMonthTotal: data.totals[0], 
     previousMonth: data.app_reports 
     }; 
     console.log(newObj); 
     return Object.assign({}, state, newObj); 
    } 
    }); 
} 

을 reducer.js, return Object.assign({}, state, newObj); 성공적으로 예를 들어, 내 REDUX 저장소에 데이터를 설정합니다

이

// reducer.js

function setState(state, newState) { 
    return Object.assign({}, state, newState); 
} 

function setToStore(state, data, label) { 
    let newObj = {}; 
    newObj[label] = data; 
    return Object.assign({}, state, newObj); 
} 

편집 : 이것은 reducer 동작의 측면입니다 ... 내 action-creator 조금 엉뚱한입니다. 더 완전한 이야기는이 아약스 호출은 다른 아약스 호출로 시작된 파견 작업 체인의 끝에 온다는 것입니다. 전체적인 목표는 (1) 두 개의 유닉스 타임 스탬프에 의해 주어진 범위에 기초하여 한 세트의 데이터를받는 것; (2) 이전 달의 범위를 계산; (3) 이전 달 데이터에 대한 새로운 요청을 생성하기 위해 새로운 날짜 범위를 사용하십시오. 이전 달 데이터를 redux 상점에 최종 할당하는 것을 제외하고는 모두 작동합니다.

// 최종 파견이 예상대로 작동 실패, 본질적으로

export function getDataPointQuery(queryObj) { 
    const app = queryObj.app_id ? queryObj.app_id : CONFIG.test_app; 
    const token = queryObj.token ? queryObj.token : CONFIG.token; 
    const start_date = queryObj.start_date ? queryObj.start_date : CONFIG.start_date; 
    const end_date = queryObj.end_date ? queryObj.end_date : CONFIG.end_date; 
    const uri = CONFIG.host2+"/v3/apps/"+app+"/app_reports?token="+token+"&start="+queryObj.start_date+"&end="+queryObj.end_date; 

    return(dispatch) => { 
    $.ajax({ 
     url: uri, 
     method: "GET", 
     dataType: "json", 
    }).then((data) => { 
     dispatch(setToStore(app, "appId")); 
     dispatch(setToStore(token, "token")); 
     dispatch(setToStore(data.app_reports, "dataQueryPeriod")); 
     dispatch(setToStore(data.totals[0], "dataQueryPeriodTotal")); 
     dispatch(setToStore(data.app_reports[0].created_at, "startDate")); 
     dispatch(setToStore(data.app_reports[data.app_reports.length-1].created_at, "endDate")); 
    }).then(() => { 
     dispatch(getPreviousMonthDates()); 
     dispatch(createChartJsData()); 
    }).then(() => { 
     dispatch(getPreviousMonthData()); 
    }); 
    }; 
} 

을 action_creators.js. 나는 또한 하나의 아약스 전화를 action_creators에서, 또 하나의 아약스 전화를 reducer에서하기에는 너무 비열하다는 사실을 잘 알고있다. 나는 한 번 작동 한 다음 리팩터링하기를 바랐다. guruPitka의 조언에 따라

는

Answer 1

, 나는 reducer 아약스 호출을 도랑을 다음과 같은 괴수 만든 action_creator으로 그것을 구현 :

export function getDataPointQuery(queryObj) { 
    // variables and stuff 

    return(dispatch) => { 
    $.ajax({ 
     url: uri, 
     method: "GET", 
     dataType: "json" 
    }).then((data) => { 
     dispatch(setToStore(app, "appId")); 
     dispatch(setToStore(token, "token")); 
     dispatch(setToStore(data.app_reports, "dataQueryPeriod")); 
     dispatch(setToStore(data.totals[0], "dataQueryPeriodTotal")); 
     dispatch(getMonthDates()); 
    }).then(() => { 
     dispatch(getPreviousMonthDates()); 
     dispatch(createChartJsData()); 
    }).then(() => {  
     $.ajax({ 
     url: previousUri, 
     method: "GET", 
     dataType: "json" 
     }).then((result) => { 
     console.log(result); 
     dispatch(setToStore(result.app_reports, "previousMonth")); 
     dispatch(setToStore(result.totals[0], "previousMonthTotal")); 
     }); 
    }); 
    }; 
}