9、Next.js 中本地和全局状态管理

Next.js 中本地和全局状态管理

在 Next.js 应用开发过程中，状态管理是一个关键环节，借助合理的状态管理，能够让应用的各个组件之间实现高效的数据共享与交互。接下来，我们会详细探讨 Next.js 里本地和全局状态管理的相关内容，并且通过一个简单的电商应用实例来深入理解。

1. 加载状态处理

在客户端获取外部数据时，会存在一段时间既没有数据也没有错误的情况，因为此时还在等待 HTTP 请求完成。我们可以通过设置一个加载状态来处理这种情况，在请求完成前将加载状态设为 true ，这样就能在界面上显示一个漂亮的加载指示器。

在 React 中，像 useState 和 useReducer 这样的钩子可以轻松实现本地状态管理，大多数情况下，无需借助外部库就能完成。

2. 全局状态管理概述

全局应用状态指的是在给定的 Web 应用中，所有组件共享的状态，任何组件都可以访问和修改这个状态。不过，React 的数据流向是单向的，组件可以向子组件传递数据，但不能向父组件传递，这虽然让组件更稳定、易调试且高效，但也增加了实现全局状态的难度。

在电商网站的场景中，当用户将商品添加到购物车时，我们希望在导航栏显示购物车中的商品数量，这就需要进行全局状态管理。目前有许多库可以简化这种情况的处理，例如 Redux、Recoil 和 MobX 等，同时，借助 React Hooks 引入的 Context APIs，我们也可以在不依赖外部库的情况下管理全局应用状态。另外，还有一种不太常见的方法是使用 Apollo Client（及其内存缓存）