React Native，Redux - 成功执行另一个异步操作后如何执行异步操作

Question

在 react native 应用程序中，我需要通过执行异步操作来更新列表项，并且在成功执行特定更新异步操作后，我需要使用上述更新操作的更改分别重新加载列表项。在这里，我通过执行异步操作来重新加载列表。 我想知道如何在成功执行第一个（A）然后是第二个（B）之后依次执行两个异步操作（A和B）

我已经用 redux 实现了一个 react-native 应用程序。基本上它是使用 Web 服务与 API 进行通信。我使用 Fetch API 来实现异步调用，并使用自定义实现的 Http 中间件来处理异步调用作为常用方法（我没有使用 thunk）

自定义中间件如下所示

    export const commonHttpAction = (action) => {
    const commonHttpActionTemplate = {
        type: '',
        urlParam: null,
        httpMethod: action.requestMethod == undefined ? 'GET' : action.requestMethod,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + accessToken
        },
        body: action.requestBody == undefined ? undefined : action.requestBody,
        payload: null
    };

    return {
        HTTP_ACTION: Object.assign({}, commonHttpActionTemplate, action)
    };
};

    const httpMiddleware = store => next => action => {
    if(action[HTTP_ACTION]) {
        const actionInfo = action[HTTP_ACTION];
        const fetchOptions = {
            method: actionInfo.httpMethod,
            headers: actionInfo.headers,
            body: actionInfo.body || actionInfo.requestBody || actionInfo.payload || null
        };

        next({
           type: actionInfo.type + "_REQUEST"
        });

        fetch(getHostUrl() + '/' + actionInfo.urlParam, fetchOptions)
            .then(response => response.json())
            .then(responseJson => next({
                type: actionInfo.type + "_SUCCESS",
                payload: responseJson
            }))
            .catch(error => next({
                type: actionInfo.type + "_FAILURE",
                payload: error
            }));
    } else {
        return next(action);
    }
}

export default httpMiddleware;

然后，我使用上述自定义中间件通过 react-native 组件/屏幕中的 mapDispatchToProps 和 connect() 函数分派了异步操作。

然后reducers会根据动作类型来处理响应。

例如：

    ACTION_TYPE_REQUEST, ACTION_TYPE_SUCCESS and ACTION_TYPE_FAILURE

然后在组件/屏幕中，我使用“mapStateToProps”函数来使用减速器的有效负载

如上所述，我已经将数据提取到我的屏幕上，想象一下，如果我通过调度异步操作将数据加载到列表中创建了一个平面列表，我将通过调度另一个异步来更新其中一个列表项行动。 成功完成更新异步操作后，我需要重新渲染 Flatlist。 到目前为止，我已经尝试了一个回调函数。但是在我的实现中，列表加载异步操作没有调度（只是在更新列表项之一后 Flatlist 没有重新加载）。

我已经写了如下回调

class ExampleComponent extends Component {
    componentDidMount() {
       this.props.listDataLoadingAction()
    }
    render() {
       return(
         <View>
            <Flatlist
              renderItem={(item) => 
                <View>
                  <TouchableOpacity onPress={() => {this.updateAction, 
                    ()=> this.props.listDataLoadingAction()}}>
                  </TouchableOpacity>
                </View>
              }
            />
         </View>
       );
    }

    updateActon =(callback) => {
      this.props.updateListRecordAction();
      callback();
    }

}

const mapStateToProps = state => {
  return{
    //get the reducer data
  }
}

const mapDispatchToProps = dispatch => {
  return {
   istDataLoadingAction: () => dispatch(istDataLoadingAction()),
   updateListRecordAction: () => dispatch(updateListRecordAction())
  }
}

export default connect(mapstateToProps, mapDispatchToProps)(ExampleComponent)

如果有人能提出解决方案，将不胜感激

Answer 1

如果你有一个你正在尝试做的事情的代码 sn-p，那真的很有帮助。

虽然你可以使用 async/await

async function () {
  await firstAction();
  await secondAction();
}

如果第一个操作不影响第二个操作，那么我将调度并等待两者

async function () {
  await Promise.all([
    firstAction(),
    secondAction(),
  ]);
}