另一个Action需要Redux Action数据

时间:2016-12-05 18:46:57

标签: reactjs redux react-redux

所以我有一个Action,它从休息中获取一些数据。在组件中,我需要来自fetch的这些数据,这是在商店中设置的。 我使用此数据,然后在someFunc(this.props.data)中使用componentDidMount()。之后我将someFunc的返回值赋予另一个Action,它对此数据执行某些操作并将其设置为存储。

我唯一的想法是,将someFunc作为回调给予Action,并在获取第一个数据后立即调用它。所以我在一次行动中派遣了2人。

我希望你们明白我的意思。有更好的方法吗?

修改

在Component1中,我调度一个Action,它将所需的数据加载到商店。在Component2中,我调度另一个Action,它从someFunc函数获取其值。但someFunc从第一个Action获取数据,因此当我调用someFunc时数据未定义,因为尚未在商店中设置数据。

更清楚了吗?

的Component1

componentDidMount(){
        this.props.dataLoadAction()   //action for the fetch i told
}

const mapDispatchToProps = (dispatch) => {

    return {
        dataLoadAction: () => {
            dispatch(dataLoadAction())
        }
    }
};

export default connect(null, mapDispatchToProps)(Component1);

COMPONENT2

componentDidMount(){
        this.props.changeDataAction(this.someFunc(this.props.data))
}

render(){
        return (
            <div>
                {this.props.otherData}
            </div>
        )
    }

const mapStateToProps = (state) => {

    return {
        otherData: state.someReducer.otherData,
        data: state.someReducer.data,
    }
};

const mapDispatchToProps = (dispatch) => {

    return {
        changeDataAction: (changedData) => {
            dispatch(changeDataAction(changedData))
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Component2);

操作

export function dataLoadAction(){
    return dispatch => {

    HttpRequest.getJson("some url", json => {

            dispatch(
                {
                    type: 'DATA_LOADED',
                    payload: {
                        data: json
                    }
                }
            )
        });
    });
};

}

export function changeDataAction(changedData){
    return dispatch => {

        dispatch(
            {
                type: 'LOAD_CHANGEDDATA',
                payload: mappedVis
            }
        )

    };
}

0 个答案:

没有答案