8、使用 Reducer 和 Effect Hooks 及 React Context

使用 Reducer 和 Effect Hooks 及 React Context

1. Reducer Hook 的使用

在应用开发中，全局状态通常更适合使用 Reducer Hook 而非 State Hook。因为全局状态的变化可能发生在应用的任何地方，当状态变化仅在一个函数中处理，组件通过分发操作（actions）而不是直接修改状态时，处理状态变化会更加容易。将所有状态更改逻辑集中在一处，便于维护和修复 bug，避免因忘记在所有地方更新逻辑而引入新问题。

1.1 将 State Hook 转换为 Reducer Hook

在博客应用中，有两个全局 State Hook：
- username 状态：包含当前登录用户的用户名。
- posts 状态：包含我们的动态中的所有帖子。

username 状态比较简单，仅包含一个用户名的字符串。目前将其转换为 Reducer Hook 没有意义，因为状态变化很直接：
- 登录/注册时：设置用户名。
- 注销时：清除用户名。

而 posts 状态在创建新帖子时已经需要使用扩展运算符来避免意外从动态中删除帖子，所以它是使用 Reducer Hook 的合适候选者，特别是考虑到未来可能会扩展（如获取新帖子、更新帖子、删除帖子等）。

接下来，我们将用 Reducer Hook 替换 posts State Hook，具体步骤如下：
1. 定义操作（actions）