React 中如何使用 Redux 管理应用状态

简介

Redux 是一个 JavaScript 应用程序中的状态容器。它提供了一个可预测的状态管理机制，容易在 React 中使用。Redux 有三个核心原则：

1. 单一数据源：整个应用程序状态都存储在单个对象中，即 Store。
2. 状态不可变性：状态只能通过向 Store 分发操作来修改。
3. 纯函数修改：通过“纯”函数来执行状态修改操作。

Redux 适用于中大型的 React 应用，在这样的应用中，数据流非常重要，Redux 的使用可以大大简化应用的状态管理。

Redux 的基本概念

Store

存储了 React 应用程序的状态，并且在整个应用程序中只有一个 Store。

Action

用来描述对 State 的更改。可以看作是更改 State 的指令。

Reducer

执行实际 State 更改的地方，接收一个 Action，并将 State 更改为新的状态。Reducer 是纯函数，即接受的参数不可变。

Middleware

在 Redux 中，可以使用 Middleware 增强 Redux 的行为，例如日志记录、错误报告、异步操作等。

在 React 中使用 Redux

安装 Redux

可以使用 npm 进行 Redux 的安装。

npm install redux

定义 Action 和 Reducer

先定义一个 action，在需要的地方进行调用，然后 reducer 对 action 进行响应并修改状态。这里以一个 todoList 为例。

定义一个 Action：

const ADD_TODO = 'ADD_TODO'

function addTodoAction(text) {
  return {
    type: ADD_TODO,
    text
  }
}

定义一个 reducer：

const initState = {
  list: []
}
function todoReducer(preState = initState, action) {
  switch(action.type) {
    case ADD_TODO:
      return {
        list: [...preState.list, action.text]
      }
    default:
      return preState
  }
}

创建 Store

在 React 的入口文件中创建一个 Store：

import { createStore } from 'redux'
import todoReducer from './reducers/todo'

const store = createStore(todoReducer)

订阅 Store

在 React 组件中订阅 Store：

import React, { useEffect, useState } from 'react'

function TodoList() {
  const [list, setList] = useState([])

  useEffect(() => {
    store.subscribe(() => {
      const newList = store.getState().list
      setList(newList)
    })
  }, [])

  return (
    <div>
      {
        list.map((item, index) => (
          <p key={ index }>{ item }</p>
        ))
      }
    </div>
  )
}

发送 Action

调用 Action 的方法，例如增加一个 todo：

store.dispatch(addTodoAction('New Todo'))

总结

Redux 经常被用于处理大量数据的 React 应用程序，Redux 简化了应用程序中的状态管理操作，使得代码更加清晰和易于维护。同时，Redux 可以通过使用 Middleware 提供前所未有的功能。在使用 Redux 之前，需要对它的基本概念有清晰的理解。在 React 应用程序中使用 Redux 需要定义 Action 和 Reducer 并创建 Store，并在组件中订阅 Store 和执行 Action。

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