如何优雅地展示和管理 Redux 的 actions、reducers 和 store-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个强大、灵活、易于使用的状态管理库，它被广泛地用于构建现代 Web 应用程序。Redux 将应用程序的状态存储在一个单一的对象中，称为 store。这个 store 包含了所有的状态信息，并支持进一步的增删改查。Redux 中还包含了 actions 和 reducers，它们是用来管理和改变状态的关键。本文将深入探讨如何优雅地展示和管理 Redux 中的 actions、reducers 和 store。

1. 展示 actions

管理 actions 对于 Redux 来说是至关重要的。如果你没有足够的了解和掌握，就难以编写出可靠的应用程序。下面是一些优雅的方法可以帮助您展示和管理 Redux 中的 actions：

1.1. 命名和分类

在你的应用程序中，你可能会有许多种不同类型的 actions，比如“添加一个待办事项”或“删除一个待办事项”。为了便于识别和管理这些 actions，你应该为每个 action 命名，并将它们分类到合适的类别中。

例如，假设你正在构建一个 Todo 应用。以下是一个可能的 actions 列表：

const ADD_TODO = 'ADD_TODO'
const TOGGLE_TODO = 'TOGGLE_TODO'
const DELETE_TODO = 'DELETE_TODO'
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

你可以将这些 actions 分类，并按分类书写：

// todo.js
export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const DELETE_TODO = 'DELETE_TODO'

// filter.js
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

1.2. 约束 actions

如果您从 Redux 中的 actions 中删除了某个 action，那么 Redux 不会发出任何警告，因此你的应用程序可能会崩溃。为了避免这种情况，你应该将 actions 约束为常量，以使它们的数据类型更明确。

export const ADD_TODO = 'ADD_TODO'
// 而不是
export function addTodo(text) {
  return { type: 'ADD_TODO', text }
}

1.3. 使用 action 的创建函数

如果你使用 action 的创建函数，那么 Redux 将确保正确的使用。action 的创建函数是一个返回 action 的函数，它接受一个或多个参数作为输入，并返回一个包含类型和任意其他数据的对象。

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

2. 管理 reducers

reducers 是用来管理和更新状态的关键部分。一个 reducer 接收一个旧的状态和一个 action，以及其他可选参数，然后返回一个新的状态。下面是一些方法可以帮助您优雅地管理 reducers：

2.1. 拆分 reducer

如果你的应用程序非常复杂，那么单个 reducer 可能会变得非常庞大，难以维护。为了避免这种情况，你应该将 reducer 拆分成多个小的 reducers。每个 reducer 只负责管理应用程序的某个部分，并且它们可以逐步组合。

-- -------------------- ---- -------
-- -------
-------- ----------- - --- ------- -
  ------ ------------- -
    ---- ---------
      ------ -
        ---------
        -
          --- ----------
          ----- ------------
          ---------- -----
        -
      -
    ---- ------------
      ------ -------------- --
        ------- --- --------- - - -------- ---------- --------------- - - ----
      -
    ---- ------------
      ------ ----------------- -- ------- --- ----------
    --------
      ------ -----
  -
-

-- ---------
-------- ---------------------- - --------- ------- -
  ------ ------------- -
    ---- ----------------------
      ------ -------------
    --------
      ------ -----
  -
-

2.2. 使用 combineReducers()

当你有多个 reducer 时，你可以使用 Redux 提供的 combineReducers() 函数，将它们组合在一起。

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

export default combineReducers({
  todos,
  visibilityFilter
})

2.3. 使用 Object.assign() 更新状态

为了避免在 reducer 中修改旧状态，你应该使用 Object.assign() 创建新对象的方式来更新状态。这种方法会创建一个新的状态对象，其中包含旧状态和新的数据。

-- -------------------- ---- -------
-------- ------------- - ------------- ------- -
  ------ ------------- -
    ---- ---------
      ------ ----------------- ------ -
        ------ -
          ---------------
          -
            --- ----------
            ----- ------------
            ---------- -----
          -
        -
      --
    ---- ----------------------
      ------ ----------------- ------ -
        ----------------- -------------
      --
    --------
      ------ -----
  -
-

3. 管理 store

store 是整个 Redux 的核心部分，它存储着应用程序的状态。下面是几个优雅的方式可以帮助您管理 store：

3.1. 添加中间件

middlewares 是一种可以让你在 dispatch 和 reducer 之间添加代码的方式。这使得你可以在调用 reducer 之前，做一些在整个应用程序中共享的操作（例如存储状态到服务器）。

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'

const store = createStore(rootReducer, applyMiddleware(thunk))

3.2. 使用 redux-devtools

redux-devtools 是一个强大的工具，可以帮助您分析和调试 Redux 应用程序。redux-devtools 允许您追踪每个 action 和状态变化，并提供了一个 UI，方便您查看应用程序中的数据流。

import { createStore, applyMiddleware, compose } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'

const enhancer = composeWithDevTools(applyMiddleware(...middlewares))

const store = createStore(rootReducer, enhancer)

结论

通过使用一些优雅的技巧来管理 Redux 的 actions、reducers 和 store，你可以构建一个更加模块化、清晰和易于维护的应用程序。在展示 actions 时，为每个 action 命名并使用创建函数；在管理 reducers 时，将 reducer 拆分成多个小的 reducers，使用 combineReducers() 组合它们，使用 Object.assign() 更新状态，并添加中间件；在管理 store 时，使用 redux-devtools 分析和调试。希望这篇文章对您有用，谢谢！

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