Next.js 应用中使用 Redux 的完整指南-JavaScript中文网-JavaScript教程资源分享门户

概述

在开发 Web 应用的过程中，状态管理是一项非常关键的技术。在 React 技术栈中，Redux 是一种非常流行的状态管理工具。而在 Next.js 应用中使用 Redux 则是一个常见的需求。本文将介绍在 Next.js 应用中使用 Redux 的完整指南，包括 Redux 的基础知识、在 Next.js 应用中使用 Redux 的注意事项和示例代码。

Redux 基础知识

Redux 是什么

Redux 是一个 JavaScript 应用状态容器，它能让整个应用的状态都以一个对象树的形式存储在单一的 Store 中。应用中的任何组件都可以获取 Store 中的状态或向 Store 分发事件。Redux 常常和 React 一起使用，来构建复杂的、高可复用性的 UI 组件。

Redux 核心概念

Store：是存储应用状态的地方，一般是在应用的入口文件中创建。在 Redux 中，Store 是一个状态树。
Action：描述发生了什么事件，是一个对象。
Reducer：是一个纯函数，在 Redux 中用来修改应用状态。Reducer 是根据 Action 的类型来判断是否应该修改应用状态的，它调用后必须返回一个新的状态对象。
Middleware：是 Redux 中的一种中间件机制，用来在派发 Action 之后、到达 Reducer 之前进行操作，比如用来处理异步 Action 或者日志记录等。

React-Redux

在 Redux 和 React 一起使用时，我们还需要使用 React-Redux 来将应用状态绑定到 React 组件上。React-Redux 提供了两个重要的函数：

Provider：是一个组件，使用它可以将应用状态传递给所有的子组件。
connect：是一个函数，用它将应用状态和组件进行绑定。它返回一个新的组件，这个组件会在应用状态改变时自动更新。

在 Next.js 应用中使用 Redux

在 Next.js 应用中使用 Redux 和在 React 应用中使用 Redux 的方式基本相同。但由于 Next.js 是一个服务端渲染框架，需要在服务端和客户端都使用 Redux，并且需要注意一些细节问题。

服务端渲染

在服务端，我们需要在每次请求中都创建一个新的 Store 实例，并将这个 Store 实例传递给渲染函数，以获取当前请求的状态。这可以通过使用 getInitialProps 来实现，例如：

// www.javascriptcn.com code example
import { Provider } from 'react-redux'
import { createStore } from 'redux'

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

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const store = createStore(reducer)
  const appProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {}
  return { store, pageProps: { ...appProps } }
}

export default MyApp

客户端渲染

在客户端渲染中，我们还需要使用 hydrate 函数来将服务端生成的 HTML 和客户端生成的 HTML 进行合并，以保证状态的完整性。需要注意的是，在客户端渲染中，我们应该使用 createStore 的第二个参数来传递服务器端生成的状态，例如：

// www.javascriptcn.com code example
import { Provider } from 'react-redux'
import { createStore } from 'redux'

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

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const store = createStore(reducer, ctx.req ? ctx.req.store : undefined)
  const appProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {}
  return { store, pageProps: { ...appProps } }
}

export default MyApp

注意事项

在使用 Redux 进行服务端渲染的过程中，需要注意以下几点：

在处理异步操作时，应使用 Redux Thunk 或者 Redux Saga 等中间件，以保证在服务端渲染界面时能成功解析异步操作。
如果应用中包含动态路由，需要动态地修改 Store 中对应路由的状态，以确保应用能正确处理路由相关的逻辑。
使用 connect 函数将应用组件与 Redux 绑定时，应注意只有需要绑定 Redux 的组件才使用 connect 函数，以尽量减少重渲染的次数。

示例代码

下面的示例代码演示了在 Next.js 应用中使用 Redux 的完整流程，并演示了如何开发一个简单的 To-do List 应用。

安装依赖

首先，我们需要安装必要的依赖，包括 redux、react-redux 和 next-redux-wrapper：

npm install redux react-redux next-redux-wrapper

创建 Store

我们需要先定义一个 Reducer，用它来修改应用状态：

// www.javascriptcn.com code example
const initialState = {
  todos: [],
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
      }
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload),
      }
    default:
      return state
  }
}

export default reducer

然后，我们需要创建一个 Store 实例，并使用 Next.js 中的 wrapper 函数将其打包成一个高阶组件，以供应用组件使用。示例代码如下：

import { createStore } from 'redux'
import { createWrapper } from 'next-redux-wrapper'
import reducer from './reducer'

const getStore = () => createStore(reducer)

export default createWrapper(getStore)

创建组件

接下来，我们创建一个包含 To-do List 的组件：

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

function TodoList({ todos, addTodo, deleteTodo }) {
  const [text, setText] = useState('')

  const handleTextChange = (event) => {
    setText(event.target.value)
  }

  const handleAddClick = () => {
    if (text !== '') {
      addTodo({
        id: new Date().getTime(),
        text,
      })
      setText('')
    }
  }

  const handleDeleteClick = (id) => () => {
    deleteTodo(id)
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleTextChange} />
      <button onClick={handleAddClick}>Add</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={handleDeleteClick(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

const mapStateToProps = (state) => ({
  todos: state.todos,
})

const mapDispatchToProps = (dispatch) => ({
  addTodo: (todo) => dispatch({ type: 'ADD_TODO', payload: todo }),
  deleteTodo: (id) => dispatch({ type: 'DELETE_TODO', payload: id }),
})

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

渲染组件

最后，我们在页面中渲染这个组件：

// www.javascriptcn.com code example
import { Provider } from 'react-redux'
import AppWrapper from '../redux/store'
import TodoList from '../components/TodoList'

function Home() {
  return (
    <AppWrapper>
      <Provider>
        <TodoList />
      </Provider>
    </AppWrapper>
  )
}

export default Home

至此，我们已经学习了在 Next.js 应用中使用 Redux 的完整指南，并开发了一个简单的 To-do List 应用。在实践中，我们需要根据具体的业务需求进行相应的修改和调整。

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

Next.js 应用中使用 Redux 的完整指南

概述