Next.js 项目如何实现全局状态管理？

在大型应用中，管理状态变得越来越困难，这时候一个好的全局状态管理方案就显得尤为重要。在 Next.js 项目中，如何实现全局状态管理呢？本文将介绍一些解决方案，并提供示例代码。

一、React Context API

React提供的 Context API 是 React 应用程序中的全局状态管理解决方案之一。它允许在组件树中传递数据，而不必将props逐层传递给所有组件。

示例

创建一个包含 Context 和 Provider 的文件 myContext.js。

// www.javascriptcn.com code example
import React, { createContext, useReducer } from "react";

export const MyContext = createContext({});

const initialState = {
  user: null,
};

const reducer = (state, action) => {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        user: action.payload,
      };
    case "LOGOUT":
      return {
        ...state,
        user: null,
      };
    default:
      return state;
  }
};

const MyProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const login = (user) => {
    dispatch({ type: "LOGIN", payload: user });
  };

  const logout = () => {
    dispatch({ type: "LOGOUT" });
  };

  return (
    <MyContext.Provider value={{ state, login, logout }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

然后，在你的Next.js页面Component中，你可以通过使用useContext来读取该Context中的值:

// www.javascriptcn.com code example
import { useContext } from "react";
import { MyContext } from "../myContext";

const Home = () => {
  const { state, login, logout } = useContext(MyContext);

  return (
    <div>
      <h1>Home Page</h1>
      {state.user ? (
        <>
          <p>{state.user.name}</p>
          <button onClick={() => logout()}>Log out</button>
        </>
      ) : (
        <>
          <p>Please login</p>
          <button onClick={() => login({ name: "Tom" })}>Log in</button>
        </>
      )}
    </div>
  );
};

export default Home;

二、Redux

Redux是JavaScript应用程序的可预测状态容器。Redux提供了一个状态容器，使我们能够管理应用程序的状态，并且在整个应用程序中共享。

示例

在 Next.js 项目中使用 Redux，你需要使用 redux 和 react-redux 包。

1. 先安装需要的依赖包：

yarn add redux react-redux

1. 创建Redux需要的相关模块

// www.javascriptcn.com code example
// actions.js
export function login(user) {
  return {
    type: "LOGIN",
    payload: user,
  };
}

export function logout() {
  return { type: "LOGOUT" };
}

// reducer.js
const initialState = {
  user: null,
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        user: action.payload,
      };
    case "LOGOUT":
      return {
        ...state,
        user: null,
      };
    default:
      return state;
  }
}

// store.js
import { createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer);

export default store;

1. 在根组件中包装并提供 Redux store

// www.javascriptcn.com code example
// pages/_app.js
import React from "react";
import { Provider } from "react-redux";
import store from "../store";

export default function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

现在，你的Redux store中的数据即可被使用了，如下：

// www.javascriptcn.com code example
import { connect } from "react-redux";
import { login, logout } from "../actions";

const Home = ({ user, login, logout }) => {
  return (
    <div>
      <h1>Home Page</h1>
      {user ? (
        <>
          <p>{user.name}</p>
          <button onClick={() => logout()}>Log out</button>
        </>
      ) : (
        <>
          <p>Please login</p>
          <button onClick={() => login({ name: "Tom" })}>Log in</button>
        </>
      )}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};

export default connect(mapStateToProps, { login, logout })(Home);

以上，提供了两种 Next.js 项目中实现全局状态管理解决方案，你可以选择你喜欢的那一种。同时，也希望这篇文章对你有指导价值。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d66fbba941bf7134c33036