Redux 实践总结及最佳实践

介绍

Redux 是一个用于管理 JavaScript 应用程序状态的开源 JavaScript 库。它可以与任何视图库（如 React、Angular、Vue 等）一起使用，但 Redux 并不是一个视图库。它的目的是提供一个可预测的状态容器，以帮助编写更容易测试、可维护和可扩展的应用程序。

本文将总结 Redux 的实践经验并提供最佳实践，以帮助开发人员更好地使用 Redux。

Redux 的核心概念

在开始 Redux 实践之前，我们需要先了解 Redux 的核心概念。

Store

Store 是一个存储应用程序状态的容器。它是 Redux 的核心，包含了整个应用程序的状态。通过 Store，我们可以访问和更新应用程序状态。

Action

Action 描述了发生了什么，它是一个纯 JavaScript 对象，包含一个 type 字段和一些其他的数据。当我们想要更新应用程序状态时，我们需要 dispatch 一个 Action。

Reducer

Reducer 是一个纯函数，它接收一个 Action 和当前的状态，并返回一个新的状态。Reducer 是 Redux 的核心之一，它负责更新应用程序状态。

Redux 实践经验

将状态分解成更小的块

将状态分解成更小的块可以使代码更易于理解和维护。我们可以使用 combineReducers 函数将多个 Reducer 合并成一个 Reducer。这样，每个 Reducer 只需要关注应用程序状态的一部分，而不是整个状态。

例如，我们可以将一个包含用户信息和文章信息的状态分解成两个状态，分别由两个 Reducer 管理。

const userReducer = (state = {}, action) => {
  switch (action.type) {
    case 'USER_LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        userInfo: action.payload
      }
    case 'USER_LOGOUT':
      return {
        ...state,
        isLoggedIn: false,
        userInfo: {}
      }
    default:
      return state
  }
}

const articleReducer = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_ARTICLE':
      return {
        ...state,
        articles: [...state.articles, action.payload]
      }
    case 'REMOVE_ARTICLE':
      return {
        ...state,
        articles: state.articles.filter(article => article.id !== action.payload.id)
      }
    default:
      return state
  }
}

const rootReducer = combineReducers({
  user: userReducer,
  article: articleReducer
})

使用 Redux DevTools 调试应用程序

Redux DevTools 是一个浏览器扩展程序，可以帮助开发人员调试 Redux 应用程序。它提供了一个可视化界面，显示了 Redux Store 中的状态和 Action，以及它们之间的关系。

使用 Redux DevTools，开发人员可以轻松地追踪应用程序状态的变化，并快速定位问题。

import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducers'

const store = createStore(rootReducer, composeWithDevTools())

使用 Redux 中间件

Redux 中间件是一个函数，它拦截 dispatch 方法的调用，并在 Action 到达 Reducer 之前执行一些额外的代码。中间件可以用于日志记录、异步操作等。

例如，我们可以使用 redux-thunk 中间件处理异步操作。

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

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

使用 Selector 访问 Store 中的状态

Selector 是一个函数，它从 Redux Store 中选择数据。使用 Selector 可以将 Store 中的状态转换为视图组件所需的格式，以及提高性能。

例如，我们可以使用 reselect 库创建 Selector。

import { createSelector } from 'reselect'

const getUser = state => state.user

export const getUserInfo = createSelector(
  getUser,
  user => user.userInfo
)

Redux 最佳实践

将应用程序划分为模块

将应用程序划分为模块可以使代码更易于理解和维护。每个模块都应该包含一个 Reducer、Action 和 Selector。

例如，我们可以将一个包含用户信息和文章信息的应用程序划分为两个模块，分别由两个文件夹管理。

src/
  modules/
    user/
      actions.js
      reducer.js
      selectors.js
    article/
      actions.js
      reducer.js
      selectors.js

使用常量定义 Action 类型

使用常量定义 Action 类型可以避免拼写错误和重复定义。我们可以将 Action 类型定义为常量，并在应用程序中重复使用它们。

例如，我们可以将 ADD_ARTICLE 和 REMOVE_ARTICLE 定义为常量。

export const ADD_ARTICLE = 'ADD_ARTICLE'
export const REMOVE_ARTICLE = 'REMOVE_ARTICLE'

不要直接修改状态

不要直接修改状态，而是返回一个新的状态。这可以避免意外的状态更改，并使代码更易于理解和维护。

例如，我们可以使用展开运算符返回一个新的状态。

case 'ADD_ARTICLE':
  return {
    ...state,
    articles: [...state.articles, action.payload]
  }

使用 immer 简化状态更新

immer 是一个库，可以使状态更新更加简单和直观。它提供了一种更自然的方式来更新嵌套状态。

例如，我们可以使用 immer 更新嵌套状态。

import produce from 'immer'

const articleReducer = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_COMMENT':
      return produce(state, draftState => {
        const article = draftState.articles.find(article => article.id === action.payload.articleId)
        article.comments.push(action.payload.comment)
      })
    default:
      return state
  }
}

结论

Redux 是一个非常强大和有用的库，可以帮助我们管理应用程序状态。通过将状态分解成更小的块、使用 Redux DevTools、使用 Redux 中间件、使用 Selector 访问状态、将应用程序划分为模块、使用常量定义 Action 类型、不要直接修改状态、使用 immer 简化状态更新等最佳实践，我们可以更好地使用 Redux。

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