내가 REST의 API로부터 데이터를 페치 <strong>비동기</strong> 작용을 가지고

Question

다른 작업 후 돌아 오는 디스패치 작용 반작용 top = 10, skip = 0의 초기 상태입니다. 구성 요소 :

처음 버튼 다음 클릭

class List extends Component { 
    componentDidMount() {   
     this.list(); 
    } 

    nextPage() { 
     let top = this.props.list.top; 
     let skip = this.props.list.skip; 

     // After this 
     this.props.onSetSkip(skip + top); 

     // Here skip has previous value of 0. 
     this.list(); 
     // Here skip has new value of 10. 
    } 

    list() { 
     this.props.List(this.props.list.top, this.props.list.skip); 
    } 

    render() { 
     return (
      <div> 
       <table> ... </table> 
       <button onClick={this.nextPage.bind(this)}>Next</button> 
      </div> 
     ); 
    } 
} 

, 비동기 동작을 사용 skip의 값은 변경되지. 이 (가)에 동기화 된 후 조치를 전달하는 방법은 무엇입니까?

Answer 1

답장을 주셔서 감사합니다,하지만 난 그것을 이런 식으로 만든 :

let top = this.props.list.top; 
let skip = this.props.list.skip; 
let newSkip = skip + top; 

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

먼저 내가 skip 새로운 계산이 새 값으로 비동기 동작을 파견합니다. 그런 다음 syns 액션을 파견합니다.이 액션은 상태가 skip입니다. 당신이 redux thunk를 사용하는 경우

Answer 2

동기화 작업 후에 작업을 디스패치하는 대신 감속기에서 함수를 호출 할 수 있습니까?

는 그래서이 흐름을 다음과

동기화 작업을 호출 -> 감속기 호출 --->의 경우 기능 (감속기) --->의 경우 기능 (감속기)

대신 당신을 위해 아마 이것이다 일반적인 흐름 :

동기화 작업을 호출 -> 감속기 호출

이 안내서에 따라 split the reducers up을 참조하십시오.

발송하려는 작업이 측면에 영향을 미치지 만 올바른 방법은 Thunks를 사용하는 것입니다. 그런 다음 작업 후에 작업을 발송할 수 있습니다.

Thunks에 대한

예 :

export const setSkip = (skip) => { 
    return (dispatch, getState) => { 

     dispatch(someFunc()); 
     //Do someFunc first then this action, use getState() for currentState if you want 
     return { 
      type: 'LIST.SET_SKIP', 
      skip: skip 
     }; 
    } 
}; 

Answer 3

파견 ({유형 : 'LIST.SUCCESS'데이터 : 데이터를 건너 뜁니다 를 동기화 작업 후 원하는 값});

Answer 4

또한 redux-sequence-action

Answer 5

을 이것 좀 봐, 당신은 쉽게 결합 할 수 있습니다. 액션 작성자가 액션 대신 함수를 반환 할 수있게 해주는 미들웨어입니다.

액션 크리에이터를 연결할 필요가없고 두 개만 실행해야하는 경우 솔루션이 지금 도움이되었을 수 있습니다.

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

당신이 (동기 방식으로 그들을 호출) 또는 첫 번째 작업의 데이터를 파견에서 대기 체인 필요가있는 경우,이 내가 권하고 싶습니다 것입니다.

export function onList(data) { 
    return (dispatch) => { 
      dispatch(ONLIST_REQUEST()); 
    return (AsyncAPICall) 
    .then((response) => { 
     dispatch(ONLIST_SUCCESS(response.data)); 
    }) 
    .catch((err) => { 
     console.log(err); 
    }); 
    }; 
} 

export function setSkip(data) { 
     return (dispatch) => { 
       dispatch(SETSKIP_REQUEST()); 
     return (AsyncAPICall(data)) 
     .then((response) => { 
      dispatch(SETSKIP_SUCCESS(response.data)); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
     }; 
    } 

export function onListAndSetSkip(dataForOnList) { 
    return (dispatch) => { 
    dispatch(onList(dataForOnList)).then((dataAfterOnList) => { 
     dispatch(setSkip(dataAfterOnList)); 
    }); 
    }; 
}