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

Question

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

我已经用redux实现了一个react原生应用程序。基本上，它使用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本地组件/屏幕中的mapDispatchToProps和connect((函数调度了异步操作。

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

例如：

ACTION_TYPE_REQUEST, ACTION_TYPE_SUCCESS and ACTION_TYPE_FAILURE

然后在组件/屏幕中，我使用了"mapStateToProps"功能来使用减缩器的有效载荷

如上所述，我已经将数据提取到我的屏幕上，想象一下，如果我通过调度一个异步操作将数据加载到列表中来创建一个平面列表，并且我将通过调度另一个异步动作来更新其中一个列表项。在成功完成更新异步操作后，我需要重新渲染平面列表。到目前为止，我已经尝试了一个回调函数。但在我的实现中，列表加载异步操作不是调度(简单地说，在列表项更新后，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 function () {
await firstAction();
await secondAction();
}

如果第一个动作没有影响第二个动作，那么我会调度并等待两个

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