React Hook丨这两个hook加ts，如虎添翼

Posted 2023-03-18

参考技术A 但是我们可以用 useReducer 和 useContext ~

useContext 可以实现状态共享，useReducer 可以实现犹如 redux 状态管理器 dispatch 的功能 。
这样一来，我们就可以拿这两个hook来实现一个简单的状态管理器了。
如果再加入ts呢，我们可以想到的是自己定义的诸多 type ，通过ts加编辑器的支持，在我们眼前呈现的那种愉悦感 ~

在项目中，我们可能会有多个状态需要共享，我们可能会在登录后异步请求获取用户信息，然后在其他页面会用到这个用户信息... 。

那就让我们就用这两个hook举个例子吧：
（ 这两个hook还不了解的小伙伴，可以看上一篇文章介绍， 点我点我 )

userInfo/index.declare.ts

这个文件这里把它提取出来，声明了基本的 state 、type的约束与action，参数用 payload 来接收

userInfo/index.tsx

解释：

但是这里我们用高阶组件的方式，让我们在对 root 组件包裹的时候可以更灵活，请耐心继续往下看。

我们可以看到 reducers 专门用来放一些 reducer 模块，userInfo、userList...

reducers/index.ts 作为一个 main 文件，我们来看看里面的实现：

解释：

App.tsx

userReducer.demo.tsx

我们在做项目的时候，这两个hook可以用来做很轻巧的 redux，我们还可以自己实现异步 action。再加上ts，让我们在其他页面书写 dispatch 有一种稳重感 ~，用 compose 方法组合各个高阶组件，让我们更加灵活的共享各个状态。

所以， 赶紧点我查看完整例子