在本机中处理多个调度

Question

I would like some help with calling multiple dispatch. I have the below code but the dispatch calls are asynchronous. I am not sure how to make synchronous dispatch calls? Below is my code.

componentDidMount () {
    this.props.getItem1()
    this.props.getItem2()
    this.props.getItem3()
}
const mapStateToProps = state => ({
  item1Fetching: state.item1.fetching,
  item1Error: state.item1.error,
  item2Fetching: state.item2.fetching,
  item2Error: state.item2.error,
  item3Fetching: state.item3.fetching,
  item3Error: state.item3.error,
})

const mapDispatchToProps = dispatch => ({
  getItem1: () => {
    dispatch(Item1Actions.item1Request())
  },
  getItem2: () => {
    dispatch(Item2Actions.item2Request())
  },
  getItem3: () => {
    dispatch(Item3Actions.item3Request())
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(LoadingScreen)

Answer 1

as a workaround you can create a single action to dispatch and in execution of that action you can dispatch your three item fetching methods one by one.

in your mapDispatchToProps method you can do the following

const mapDispatchToProps = dispatch => bindActionCreators(itemsAction, dispatch)

in your actions.js you can do the following....

`export const itemsActions = () => {
  return (dispatch, getState) => {
    return item1Request().then((data) => {
      dispatch(data);
      return item2Request().then(data2 => {
        dispatch(data2);
        return item3Request().then(data3 => dispatch(data3))
      })
    })
  }
}`

I hope this helps you. this way you can make them one by one