NextJS 系列之状态管理

在 Next.js 开发中，状态管理是一个重要的考虑因素。一般而言，单个页面的状态管理使用 React 自带的 useState 和 useReducer 足以满足需求，而涉及跨页面的状态管理时，则更推荐使用第三方状态管理库，以提高代码的可维护性和可扩展性。

常见的跨页面状态管理方案

1. Zustand（轻量高效）

Zustand 是一个比 Redux 更加轻量、易用的状态管理库，它基于 hooks 设计，使用起来更加简洁。

示例：创建一个全局的 userStore


import { create } from "zustand";

const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

export default useUserStore;

在组件中使用：


import useUserStore from "../store/userStore";

const Profile = () => {
  const { user, setUser, logout } = useUserStore();

  return (
    <div>
      <h2>User: {user ? user.name : "Not Logged In"}</h2>
      <button onClick={() => setUser({ name: "John Doe" })}>Login</button>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

2. Recoil（官方支持，轻量灵活）

Recoil 是 Facebook 开发的状态管理库，它提供了更好的开发体验，适用于组件共享状态。


import { atom, useRecoilState } from "recoil";

const userState = atom({
  key: "userState",
  default: null,
});

const Profile = () => {
  const [user, setUser] = useRecoilState(userState);

  return (
    <div>
      <h2>User: {user ? user.name : "Not Logged In"}</h2>
      <button onClick={() => setUser({ name: "Jane Doe" })}>Login</button>
      <button onClick={() => setUser(null)}>Logout</button>
    </div>
  );
};

3. Jotai（简洁原子化）

Jotai 也是基于 React Hooks 设计的，它比 Recoil 更加简洁，且支持更灵活的状态管理方式。


import { atom, useAtom } from "jotai";

const userAtom = atom(null);

const Profile = () => {
  const [user, setUser] = useAtom(userAtom);

  return (
    <div>
      <h2>User: {user ? user.name : "Not Logged In"}</h2>
      <button onClick={() => setUser({ name: "Alex" })}>Login</button>
      <button onClick={() => setUser(null)}>Logout</button>
    </div>
  );
};

4. Redux Toolkit（适用于复杂应用）

对于大型应用，Redux 仍然是一个可靠的选择，推荐使用 Redux Toolkit 来简化 Redux 的样板代码。


import { createSlice, configureStore } from "@reduxjs/toolkit";
import { Provider, useDispatch, useSelector } from "react-redux";

const userSlice = createSlice({
  name: "user",
  initialState: { user: null },
  reducers: {
    setUser: (state, action) => { state.user = action.payload; },
    logout: (state) => { state.user = null; },
  },
});

const store = configureStore({ reducer: { user: userSlice.reducer } });

const Profile = () => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.user);

  return (
    <div>
      <h2>User: {user ? user.name : "Not Logged In"}</h2>
      <button onClick={() => dispatch(userSlice.actions.setUser({ name: "Chris" }))}>Login</button>
      <button onClick={() => dispatch(userSlice.actions.logout())}>Logout</button>
    </div>
  );
};

const App = () => (
  <Provider store={store}>
    <Profile />
  </Provider>
);

如何选择状态管理方案？

方案	适用场景	特点
`useState` / `useReducer`	组件内部状态	简单快速，无需外部依赖
Zustand	中小型应用，轻量全局状态	轻量易用，性能优越
Recoil	需要官方支持，组件间状态共享	类似 React 内部状态，支持异步数据
Jotai	轻量、灵活的状态管理	简单 API，可组合原子状态
Redux Toolkit	大型应用，全局状态复杂	结构化管理，开发工具强大

总结

单页面状态：使用 useState 或 useReducer

小型跨页面状态：使用 Zustand、Recoil 或 Jotai

复杂全局状态：使用 Redux Toolkit

对于 Next.js 项目，通常 Zustand 是最推荐的选择，它简单、易用，并且支持服务端渲染（SSR）。如果你的应用规模较大，可以考虑 Redux Toolkit。

NextJS 系列 之 状态管理