Next.js 项目中如何使用 Redux？-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一种流行的 JavaScript 状态管理库，可以帮助前端开发者更好地管理应用程序中的数据流。在 Next.js 项目中，使用 Redux 可以更好地组织和维护应用程序状态，并使不同组件之间的通信更加容易和高效。本文将介绍如何在 Next.js 项目中使用 Redux，让你的开发工作更加高效。

安装 Redux 和相关依赖

在使用 Redux 之前，需要先安装相关依赖。在 Next.js 中使用 Redux 需要安装以下依赖：

redux：Redux 库。
react-redux：React 绑定库，用于包装 React 组件和 Redux。
redux-thunk：Redux 中间件，用于处理异步数据流。
next-redux-wrapper：用于将 Next.js 应用程序包装成 Redux 应用程序的高阶组件。

运行以下命令安装相关依赖：

npm install redux react-redux redux-thunk next-redux-wrapper

创建 Redux Store

Redux 应用程序的核心是 Redux store，它是一个包含应用程序状态的 JavaScript 对象。首先，创建一个文件 store.js，并编写以下代码：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

// 创建 reducer 函数
const reducer = (state, action) => {
  switch (action.type) {
    // add case
    default:
      return state;
  }
};

// 创建 store，并将中间件应用到 store 上
const initStore = () => {
  return createStore(reducer, applyMiddleware(thunkMiddleware));
};

export default initStore;

在上面的代码中，我们首先引入了 Redux 中的 createStore 和 applyMiddleware 方法，以及 Redux-thunk 库。createStore 方法用于创建 Redux Store，applyMiddleware 用于将中间件应用到 Store 上。然后，我们定义了一个简单的 reducer 函数，并将其传递给 createStore 方法以创建 store。最后，我们将这个初始化 store 的函数导出。

向应用程序添加 Redux

现在，在 Next.js 应用程序中添加 Redux，需要创建一个高阶组件来将 Next.js 中的应用程序包装成一个 Redux 应用程序。我们可以在 pages/_app.jsx 文件中创建一个高阶组件来完成这个任务：

// www.javascriptcn.com code example
import { Provider } from 'react-redux';
import { createWrapper } from 'next-redux-wrapper';
import initStore from '../store';

const MyApp = ({ Component, pageProps }) => {
  return (
    <Provider store={initStore()}>
      <Component {...pageProps} />
    </Provider>
  );
};

const makeStore = () => initStore();
const wrapper = createWrapper(makeStore);

export default wrapper.withRedux(MyApp);

在上面的代码中，我们首先导入了 Provider 组件和 createWrapper 函数，用于将 Next.js 应用程序包装成 Redux 应用程序。然后，我们创建了一个简单的函数来包装 MyApp 组件，该函数在初始化 store 后返回包含 MyApp 组件的 Provider。最后，我们使用 createWrapper 函数来创建高阶组件，并将其传递给 wrapper.withRedux 方法，以保证 Redux store 可以在 Next.js 应用程序中使用。

在应用程序中使用 Redux

现在，可以在任何组件中使用 Redux 中的 store 了。在组件中使用 Redux 需要先导入 React-Redux 库，然后使用 connect 方法将组件连接到 store。

// www.javascriptcn.com code example
import { connect } from 'react-redux';

const MyComponent = ({ myValue }) => {
  return (
    <div>
      <p>{myValue}</p>
    </div>
  );
};

// 使用 connect 方法连接组件到 store 上
const mapStateToProps = (state) => {
  return {
    myValue: state.myValue,
  };
};

export default connect(mapStateToProps)(MyComponent);

在上面的代码中，我们首先导入了 connect 方法和 MyComponent 组件。然后，我们创建了一个将 store 中的 state 中的数据传递到组件 props 上的函数 mapStateToProps。最后，我们使用 connect 方法将组件连接到 store，并将其导出为默认组件。

在组件上创建 Action

在 Redux 中，Action 是一种描述应用程序发生事件的对象。可以在组件中使用 Redux-thunk 中间件来创建 Action，并将其分发到 store 中。例如：

// www.javascriptcn.com code example
import { useDispatch } from 'react-redux';

const MyComponent = ({ myValue }) => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch({ type: 'ADD', payload: myValue + 1 });
  };

  return (
    <div>
      <p>{myValue}</p>
      <button onClick={handleClick}>Add</button>
    </div>
  );
};

在上面的代码中，我们使用 useDispatch 钩子获取 store 中的 dispatch 方法，并在 handleClick 函数中创建了一个 action。在这个函数中，我们将新的 state（myValue + 1）作为 payload，传递给 dispatch 方法，使其更新 store 中的 state。

到此为止，我们已经了解了在 Next.js 应用程序中如何使用 Redux。希望这篇文章对你能够在你的应用程序中成功使用 Redux 有所帮助。

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

Next.js 项目中如何使用 Redux？

安装 Redux 和相关依赖

创建 Redux Store

向应用程序添加 Redux

在应用程序中使用 Redux

在组件上创建 Action

接着读