React，Redux - 通过 api 调用更新后获取数据答案

【问题标题】：React, Redux - Fetch data after updating via api callReact，Redux - 通过 api 调用更新后获取数据
【发布时间】：2018-11-17 01:58:00
【问题描述】：

我正在使用带有 redux 和 typescript 的 react，尝试通过 api 调用从 react 添加项目，无论成功还是失败都会返回。

所以我从 componentDidMount 获取数据

componentDidMount() {
    this.props.dispatch(loadData());
}

我从动作层添加如下项目

static addItem = (Item: IAddItemRequest): Promise<number> => {
            return Promise.resolve(
            AI.addItem(Item).then((ItemData) => {
                return ItemData;
            }).catch(error => {
                return error;
            }));
        }

那么如何在添加项目后加载数据

AddItem 的状态也不会改变

【问题讨论】：

标签： reactjs typescript redux redux-thunk

【解决方案1】：

可以使用两个操作来选择可能的解决方案，第一个是添加项目，第二个是加载数据。

export const loadData = (ItemData) => {
    return {
        type: LOAD_DATA,
        payload: ItemData
    };
};

export const addItemAction = (Item) => {
    return dispatch => {
        addItem(Item).then(ItemData => {
            dispatch(loadData(ItemData));
        });
    };
};

以上都是相互关联的redux动作，我们必须在react组件的componentDidMount方法中调用第一个动作，如下所示

componentDidMount() {
    this.props.dispatch(addItemAction(Item));
}

【讨论】：