react的action中异步操作遇到的问题

Z时代
2024-01-10
分类：综合

react

最近做了一个需求，就是一个很简单的tabs分页，大致是这个样子

我想将这个组件更加细化的抽出来做成更加容易扩展的组件，父组件只提供了子组件出现的x,y轴的坐标，其余的数据都由redux控制，虽然这样做过于笨重，但是这是个人尝试，在项目中当然是怎么轻量怎么来。

遇到的问题：

1.我想在页面初始化的时候就走接口获取tabs顶部的按钮名称以及对应的编码，并且利用的这个编码再去请求另一个接口第一次初始化对应的表格，简单来说就是页面初始化的时候需要走两个接口，而且这两个接口必须按照我想要的顺序去执行，然后我是这么做的，贴出代码

这个我想要第一个执行的接口，就是获取tabs各个按钮名称以及编码的接口

是这是我想要第二个执行的接口

当然按照redux的规范，我们并不能在action中直接操作state，所以想在第一个方法执行结束直接获取state是不行的，那么我们就要考虑怎么让他们按照顺序执行，我的思路是：将第一个方法返回一个promise，然后利用then再来执行第二个函数，当然这一些列操作是在组件中完成的

以上我只为大家提供一种思路，实现这个需求很简单，但是怎么样实现它最合理，最简洁，大家多多思考
总结：
1、redux的action中可以使用promise来解决异步问题
2、只执行一次的方法或者请求，我们最好放在组件的componentDidMount中，请不要尝试放在getDerivedStateFromProps比较新旧porps或者state，相信我，你可能会让这个请求或者方法执行两次甚至多次，及时你根据一些判断限制了请求次数，也会让你的代码变得难维护