实战篇：Next.js 与 Redux 搭配使用的完整案例分享-JavaScript中文网-JavaScript教程资源分享门户

前言：

Next.js 是一个基于 React 的、服务端渲染的应用框架，它可以非常方便地创建同构应用。而 Redux 则是一个非常流行的状态管理工具，许多开源项目都使用它作为应用的状态管理工具。本文将介绍如何在 Next.js 中使用 Redux，并分享一个完整的案例。

为什么要使用 Redux？

当我们开发一个 React 应用时，组件之间的通信是一个十分重要的问题。在小型的应用中，这并不是一个很大的问题，因为要共享的状态是很少的，组件之间的耦合度也很低。但是当应用规模变得越来越大时，组件之间的通信问题也变得愈发复杂。这时候使用状态管理工具，就可以很好地解决这个问题。

Redux 是一个非常好的状态管理工具，它可以让我们把应用中的状态放在一个中央存储库中，并提供一些方法来修改这些状态。在应用中，我们可以通过 connect 方法连接这些状态到我们的组件中。这样，组件就可以方便地读取和修改这些状态。

Next.js 中使用 Redux

在 Next.js 中使用 Redux，我们需要引入两个依赖： react-redux 和 redux。react-redux 是一个 React 绑定的 Redux 库，它提供了一个 Provider 组件，可以将 Redux 的存储库注入到整个应用中。而 redux 是 Redux 的核心代码库。

在 Next.js 中创建一个 Redux 存储库，和在普通的 React 应用中创建是一样的。我们需要创建 reducer 和 action，将它们放在一个文件夹中，并使用 combineReducers 将它们合并到一起。然后我们就可以使用 createStore 方法创建 Redux 的存储库了。

import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer)

export default store

使用 Provider 组件，将我们创建的存储库注入到整个应用中。

// javascriptcn.com 代码示例
import React from 'react'
import { Provider } from 'react-redux'
import store from './store'

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

现在，我们就可以在组件中使用 Redux 的状态了。我们需要用 connect 函数将我们需要的状态连接到组件中，并通过 dispatch 方法来更新状态。

// javascriptcn.com 代码示例
import React from 'react'
import { connect } from 'react-redux'

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

const mapStateToProps = state => ({
  count: state.count
})

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
})

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

至此，我们就可以在 Next.js 中使用 Redux 了。

完整案例

下面我将分享一个使用 Next.js 和 Redux 的完整案例。这个案例包含了一个简单的计数器，你可以通过它来学习如何在 Next.js 中使用 Redux。

首先，我们需要创建 Next.js 应用。

npx create-next-app my-app
cd my-app
npm run dev

接下来，我们需要安装 redux 和 react-redux。

npm install redux react-redux

然后，我们需要创建一个 Redux 的存储库。在 store 目录下创建 index.js 文件。

// javascriptcn.com 代码示例
import { createStore } from 'redux'

const initialState = { count: 0 }

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }
    case 'DECREMENT':
      return { ...state, count: state.count - 1 }
    default:
      return state
  }
}

const store = createStore(reducer)

export default store

接下来，我们需要创建一个计数器组件。在 pages 目录下创建 index.js 文件。

// javascriptcn.com 代码示例
import React from 'react'
import { connect } from 'react-redux'

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

const mapStateToProps = state => ({
  count: state.count
})

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
})

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

现在，我们已经可以在计数器中使用 redux 的状态了。接下来，我们需要将这个计数器放在一个页面中。在 pages 目录下创建 counter.js 文件。

import React from 'react'
import Counter from '../components/Counter'

export default function CounterPage() {
  return <Counter />
}

现在，我们已经完成了所有的代码编写。你可以使用 npm run dev 命令来启动应用。在浏览器中打开 http://localhost:3000/counter，你应该可以看到一个简单的计数器例子。

如果你想获取完整的案例代码，可以前往我的 GitHub 下载。

总结

在本文中，我们学习了如何在 Next.js 应用中使用 redux。我们还分享了一个完整的案例，向大家说明了如何在 Next.js 中使用 redux 改善组件通信问题。我希望这篇文章能够对你在 Next.js 中使用 redux 产生帮助，同时也希望你在实际的开发中可以更好地使用 redux 来管理你的应用的状态。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65309f417d4982a6eb230028