Redux 开发者必须知道的 15 个技巧-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一种用于管理 JavaScript 应用程序状态的流行框架。它是一个可预测的状态容器，具有以下优点：

单一的可信来源
可扩展性和可维护性
易于测试

在这篇文章中，我们将会介绍 Redux 开发者必须知道的 15 个技巧，以帮助您更好地使用 Redux 构建前端应用。

技巧 1：不要在 Redux 中进行所有事情

Redux 应该被视为应用程序状态的管理器，而不是用于处理所有逻辑的神经中枢。您应该将业务逻辑和组件状态留给组件或其他工具来处理。

例如，行为可能只是启动请求，而不是处理 API 数据的详细过程。将请求处理成一个单独的 API 函数，并将数据返回到 Redux state 中。

技巧 2：使用 Redux Toolkit

Redux Toolkit 是一个用于简化 Redux 开发的官方工具包，它提供了许多有用的工具和强制实践来加速开发和解决常见的问题。

Redux Toolkit 为您提供了许多实用功能，例如：

createSlice：使用少量样板代码创建带有类型检查的 reducer。
createAsyncThunk：为副作用操作（如 API 调用）自动生成 Redux actions。

技巧 3：使用 Redux DevTools 执行时间旅行

Redux DevTools 不仅是一个能够记录 Redux state 和 actions 的强大工具，还允许您在应用程序中“旅行”。因此，在调试或查找问题时，为了更好地了解应用程序的状态，您应该安装它，并使用它。

技巧 4：将 Redux 引入到应用程序中的第一个步骤

Redux 应该是您应用程序的第一个安装，因为它对整个应用程序的状态进行管理。任何依赖于该状态的其他插件/库都应该知道 Redux。

技巧 5：避免冗余的操作

Redux 的性能取决于 reducer 中所采取的操作和操作的数量。因此，您应该避免在 state 中留下任何冗余操作。

例如，如果您正在从中删除一些元素的数组中的元素，请勿使用 splice() 函数。而是从新数组中使用 filter() 函数来删除元素。

技巧 6：在 reducer 中使用 switch 语句

Redux 通常通过 switch 来处理多个类型的 actions，从而增加了可扩展性并减少了代码量。

// javascriptcn.com code example
const appReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT_COUNTER':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
};

技巧 7：利用第三方中间件

中间件使您能够更高效地处理诸如异步和文件上传之类的交互，并且 Chrome、Firefox 等等已经支持了这些中间件。

许多流行的中间件（例如 redux-thunk、redux-saga 和 redux-observable）都是您可以使用的。

技巧 8：将 selector 放在 reducer 之外

如果您希望缓存某些数据或计算派生状态，则需要选择器。selector 可以被视为用于从 state 中选择数据的函数。它们具有可重用性，并允许您从 state 中提取所需的数据。

由于选择器是普通函数，它们可以在 component、saga 或任何地方使用，所以我们将其与 reducer 分开通常会使代码更具可读性。

技巧 9：不要在 reducer 中修改 state

如刚刚所述，不要在 reducer 中修改 state。因为 state 是不可变对象，否则您的应用程序将变得不可预测。

相反，一定要返回新的 state。这可以通过 JavaScript 的 Object.assign() 或扩展运算符来轻松实现。

技巧 10：编写测试优先的代码

Redux 对测试友好，因此编写测试优先的代码通常有助于执行此操作。

有许多测试库可供您使用，例如 Jest 或 Mocha，来测试 Redux 应用程序中的 reducer 和 action。

技巧 11：Redux 的单向数据流

Redux 的数据流是一种比其他框架（如 React）更严格的单向数据流。这意味着流程只能流向组件，并防止状态变化的不良影响。

正因为如此，您应该明确地了解每个 action dispatch 的结果，以便将其传递到容器组件，写入 Redux state 或者执行其他操作。

技巧 12：避免在 actions 中传递对象

尽可能避免在 action 中传递对象。相反，最好传递可序列化的数据类型，如数字和字符串。

这是因为 Redux DevTools 在记录和进行时间旅行时需要使用可序列化的数据类型，以防止任何未知错误。

技巧 13：不要跳过 Redux

如果需要管理应用程序的状态，则不要跳过 Redux。尽管有其他更新的库（如 React Context 或 mobx-state-tree），但 Redux 仍然是管理您应用程序状态的最佳方式之一。

技巧 14：知道何时使用 Redux

虽然 Redux 可以很容易地处理全局状态，但对于简单的应用程序，例如表单、导航或少量的 API 调用，则可能不需要使用 Redux。

总之，您应该了解何时使用 Redux，以及它在您的应用程序中的作用。

技巧 15：充分利用 TypeScript

使用 TypeScript 可以强制执行类型检查和更清晰的代码结构，这在 Redux 应用程序中非常有用。

如果您正在使用 TypeScript，那么需要注意的一件事是要在状态中定义适当的类型，并确保在 reducer 中使用适当的类格式。

// javascriptcn.com code example
interface AppState {
  counter: number;
}

const initialState: AppState = {
  counter: 0,
};

const appReducer = (state = initialState, action: Action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT_COUNTER':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
};

结论

在 Redux 应用程序中，遵循这些技巧将使代码变得更加清晰且易于维护。基于自己的实践，不断学习以及探索人工智能，您可以更好地利用 Redux，以为您和您的团队构建更好的应用程序提供指导和支持！

// javascriptcn.com code example
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.counter);

  return (
    <div>
      <h2>Counter</h2>
      <div>
        <button onClick={() => dispatch({ type: 'DECREMENT_COUNTER' })}>-</button>
        <span>{counter}</span>
        <button onClick={() => dispatch({ type: 'INCREMENT_COUNTER' })}>+</button>
      </div>
    </div>
  );
};

export default Counter;

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