Question

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

我已经用redux实现了一个本机应用程序。基本上，它是使用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;

然后，我使用上述自定义中间件通过mapDispatchToProps和react（native）组件/屏幕中的connect（）函数调度了异步操作。

然后减速器将根据操作类型处理响应。

例如：

    ACTION_TYPE_REQUEST, ACTION_TYPE_SUCCESS and ACTION_TYPE_FAILURE

然后在组件/屏幕中，我使用了“ mapStateToProps”函数来使用化简器中的工资单

按照上述方式，我已经将数据提取到屏幕上，并想像一下如果我通过调度异步操作将数据加载到列表中而创建了Flatlist，并且我将通过调度另一个异步操作来更新其中一个列表项行动。成功完成更新异步操作后，我需要重新呈现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

如果您要尝试的代码片段确实有帮助。

通常，尽管您可以使用async / await

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

如果第一个动作不影响第二个动作，那么我将分派并等待两者

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

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

1 个答案: