Redux 상태 업데이트 및 API 호출에 대한 조언

Question

내 응용 프로그램 상태를 업데이트 한 다음 응용 프로그램 상태가 업데이트되었을 때 API 호출을 만드는 가장 좋은 방법은 무엇입니까?

응용 프로그램 수준 개체에서 전달하는 API 호출을 만드는 응용 프로그램이 있습니다.

다음은 두 가지 동작을 호출하는 컨테이너 메서드입니다. 첫 번째는 검색 기준을 업데이트하여 API 호출에 사용합니다. 문제는 fetchActivityData 호출을 만들 때 응용 프로그램 상태가 업데이트되지 않는다는 것입니다.

export default function(state = initialCriteria, action) { 
switch(action.type) { 
    case SET_ACTIVITY_ID: { 
     return {...state, activityId: action.payload}; 
    } 
    case SET_SORT: { 
     return {...state, sort: action.payload}; 
    } 
    case SET_SORT_ORDER: { 
     return {...state, sortOrder: action.payload}; 
    } 
    case SET_SEARCH_TERMS: { 
     return {...state, searchTerms: action.payload}; 
    } 
    case INCREMENT_PAGE: { 
     return {...state, page: state.page+1 }; 
    } 
    case SET_PAGESIZE: { 
     return {...state, pagesize: action.payload}; 
    } 
    default: 
     return state; 
} 
} 

그럼 내가 만드는 작업 작성자가 : 그럼

//container.js 
clickHandler(){ 
    this.props.setActivityId(this.props.activity.id); 
    this.props.fetchActivityData(this.props.searchCriteria); 
} 

....... 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ setActivityId, fetchActivityData }, 
dispatch); 
} 

function mapStateToProps(state) { 
    return { 
     searchCriteria: state.searchCriteria 
    }; 
} 

내 API 호출 기준을 업데이트 한 무리의 액션 제작자가

다음

//criteria_actions.js 
export function setActivityId(activityId){ 
return { 
    type: SET_ACTIVITY_ID, 
    payload: activityId 
    } 
} 

export function setSort(sort){ 
    return { 
    type: SET_SORT, 
    payload: sort 
    } 
} 

export function setSortOrder(sortOrder){ 
    return { 
     type: SET_SORT_ORDER, 
     payload: sortOrder 
    } 
} 

는 기준 액션 감속기입니다 API 호출

//api_action 
export function fetchActivityData(searchCriteria) { 
const { activityId, sort, sortOrder, searchTerms, page, pagesize } = searchCriteria; 
var otherFilters = ""; 

if(activityId === 7){ 
    otherFilters = '"media": "all"'; 
} 

const request = axios({ 
    method: 'get', 
    url: `${API_ROOT}/activities/campaigns/${PROJECT_ID}/sort/${sort}/sortorder/${sortOrder}/page/${page}/pagesize/${pagesize}/?filter={"at":[${activityId}],"search":"${searchTerms}",${otherFilters}}`, 
    headers: { 
     "USER_TOKEN": USER_TOKEN, 
    } 
    }); 

return { 
    type: FETCH_ACTIVITY_DATA, 
    payload: request 
} 
} 

여기 내 API 감속 기입니다.

export default function(state = [], action) { 
switch(action.type) { 
    case FETCH_ACTIVITY_DATA: 
     return action.payload.data.data.items; 
    default: 
     return state; 
} 
} 

Answer 1

문제의 가장 중요한 부분은 생략하고 있습니다. setActivityId과 fetchActivityData은 어떻게 관련이 있습니까? setActivityId은 나중에 사용 된 입력 인 fetchActivityData에 약간의 영향을 미쳤지 만, 그 영향은 무엇입니까? 이것이 진정한 문제를 가진 코드의 일부입니다.

더 일반적으로 말하면;

Redux 작업은 사용자의 추상 동작을 반영해야합니다. 사용자 작업은 이상적으로는 redux 작업에 직접 매핑해야합니다.

액션 자체는 매우 복잡 할 수 있습니다. Redux Thunk가 소비 할 수있는 함수로 액션을 래핑하면 액션도 다른 액션으로 구성 될 수 있습니다. 예;

someUserAction(input) { 
    return (dispatch, getState) { 
     dispatch(anotherAction(input)); 
     dispatch(aThirdAction(input)); 
    } 
} 

여기에는 더 많은 지식없이 사례에 대한 모범 사례를 적용하기가 어려워집니다. 당신이 제공하는 어떤 정보를 바탕으로, 나는 해결책은 다음과 같이 보일 것입니다 상상 :

export function setActivityIdAndFetch(activityId){ 
    return (dispatch, getState) { 
     dispatch(setActivityId(activityId)); 

     let searchCriteria = //some derived value 
     dispatch({ 
      type: SET_SEARCH_CRITERIA, 
      payload: searchCriteria 
     }); 

     dispatch(fetchActivityData(searchCriteria)); 
    } 
} 

또한 나는 searchCriteria가 자신의 파견으로 설정 이동할 것이라는 점을 주목할 필요가있다. 나는 당신이 현재 감속기 내부에서이 값을 파생 한 것으로 의심하지만, 이러한 논리는 행동 창조자에게 존재해야한다.