redux-actions를 통해 REQUEST/START 작업을 표현하는 방법은 무엇입니까?

Question

reactx 코드를 단순화하기 위해 redux-actions를 사용하고 싶지만 질문이 있습니다.

원격에서 일부 주제를 가져 오는 "로드"동작이 있다고합니다. 코드는 다음과 같을 것입니다 :

const load = createActions('LOAD'); 

export function fetch() { 
    return (dispatch, getState) => { 
    dispatch(fetchTopicsRequest()); // <- here is my question. 
    return network 
     .request('/topics?' + qs.stringify(getState().topics.filter.options)) 
     .then(network.handleResponse) 
     .then(result => dispatch(load(result)))  // <- here I got the topics in the payload 
     .catch(error => dispatch(load(error)));  // <- here I got the errors in the payload, in the reducer I check on the "error" field to see if the request successed. 
    }; 
} 

결과가 좋고 오류가 발생하여 한 번의 조치로 발송하는 것이 좋습니다. 그러나 동일한 작업으로 "요청 중"상태를 표현하는 방법은 무엇입니까? 위의 코드에서 알지 못했지만 다른 액션 "fetchTopicsRequest()"를 만들어야합니다. 이렇게하면 전체 코드가 이상하게 보입니다.

초기 불만에서 "상태"필드가있는 것으로 나타났습니다. 그런 경우에 유용 할 수 있습니다. 어디로 갔니? 아니면 그냥 더 좋은 아이디어를 놓친거야?

감사

Answer 1

첫째, 난 당신이 행동으로 호출하는지에 대한 이해를 수정하고 싶습니다. 귀하의 경우 함수 fetch()은 작업을 디스패치 할 수있는 작업 생성자이며, load(result) 및 load(error)이 실제 작업을 처리합니다.

이제는 fetchTopicsRequest() 액션의 더 나은 구현을 찾고 있으므로 일반적인 방법으로 작업을 작성해 보시기 바랍니다.

dispatch({type: 'FETCHING_TOPICS'}); 

지금 당신은 당신의 감속기에서이 작업을 캡처하고 무엇이든 topics가 가져 오는 동안 작업을 수행 할 수 있습니다 귀하의 경우에 이런 일이 될 것이라고.

업데이트 :

는 행동과 감속기의 구성을 사용할 수있는 pending 경우를 처리합니다. FETCHING_TOPICS 행동이 당신의 감속기에 다음 발송되면 당신은 true로 pending를 표시 할 수 있고, response이 수신되면 당신은 다음과 같이 false에 pending을 변경할 수 있습니다

function reducer(state={pending: null}, action) { 
    switch(action.type) { 
    case 'FETCHING_TOPICS': 
     return {...state, pending: true}; 
     break; 
    case 'FETCHED_TOPICS': 
     return {...state, pending: false, //payload if any}; 
     break; 
    case 'FETCHING_ERR': 
     return {...state, pending: false, //payload if any}; 
     break; 
    } 
}