想问下如果一个异步action发生后,需要立刻执行下一个异步action,

#1

比如有两个action

export const action1 = (actionData) => {
    return dispatch => {
        return fetch1(actionData)..then((result) => {
            dispatch({
                type: 'FETCH1_SUCCESS',
                payload: result
            })
        }).catch((err) => {
            dispatch({
                type: 'FETCH1_FAILED',
                payload: err
            })
        });
    }
}

export const action2 = (actionData) => {
    return dispatch => {
        return fetch1()..then((result) => {
            dispatch({
                type: 'FETCH2_SUCCESS',
                payload: result
            })
        }).catch((err) => {
            dispatch({
                type: 'FETCH2_FAILED',
                payload: err
            })
        });
    }
}

如果有的地方action1执行完要立刻执行action2,有的地方只要执行action1,我是应该这样做吗?

export const action3 = (actionData1, actionData2) => {
    return dispatch => {
        return fetch1(actionData1)..then((result) => {
            dispatch({
                type: 'FETCH1_SUCCESS',
                payload: result
            })
            dispatch(action2(actionData2));
        }).catch((err) => {
            dispatch({
                type: 'FETCH1_FAILED',
                payload: err
            })
        });
    }
}

还是先先渲染第一个组件,在根据第一个组件渲染第二个组件

const mapState = state => {
    return {
        action1Reducer: state.action1Reducer,
        action2Reducer: state.action2Reducer
    }
}

const mapDispatch = dispatch => {
    return {
        action1(data) {
            dispatch(action1(data));
        }
        action2(data) {
            dispatch(action2(data));
        }
    }
}

connect(
    mapState, 
    mapDispatch
)(Comp1);

class Comp1 extends React.Component{
    componentDidMount() {
        //data是传入
        this.props.action1(data);
    }
    render() {
        const { action1Reducer, children } = this.props;
        return (
            action1Reducer 
                ? <Comp2 />
                : null
        )
    }
} 

class Comp2 extends React.Component{
    componentDidMount() {
        //data是传入
        this.props.action2(data);
    }
    render() {
        return (
            <div></div>
        )
    }
}

<Comp1></Comp1>
#2

传一个回调函数试试

#3

回调是可以的,但是每个异步之间都可能相互组合,如果用回调,每个action里都要对callback进行判断,感觉不是很好

#4

Promise.all 组合一下

#5

可以考虑使用redux-saga,会优雅很多

#6

Promise.all还是要创建新的action才可以的,能不能有类似action.then的方式呢

#7

嗯,soga确实强大,但是项目没有用saga。