Redux 中 reducers 的职责分离和优化-JavaScript中文网-JavaScript教程资源分享门户

在使用 Redux 架构的前端项目中，reducers 是一个非常重要的部分。Reducers 对于 Redux 的运作起着至关重要的作用。他们用于响应由 action 创建器生成的 action，并更新应用程序的状态。在这个过程中，它们的职责要求它们能够清晰地处理逻辑，并且不要混淆应用程序状态的不同部分的处理。

为了在代码库中保留结构的组织，我们应该考虑 reducers 的职责分离和优化。接下来将详细介绍这些问题并提供相应的示例。

职责分离

由于 redux 的 reducers 是有关应用程序状态的，往往针对不同的状态分支分别处理。这使得代码库变得有组织，但也可能导致问题：如果一个 reducer 处理多个状态分支，那么就很难保证职责分离。

这个问题很容易理解，假设你有一个表示 user 的 reducer，它需要处理这些 action：USER_SET_USERNAME，USER_SET_EMAIL和USER_SET_PASSWORD。假设我们还有一个 cart 的 reducer，它需要处理这些 action：CART_ITEM_ADD，CART_ITEM_REMOVE和CART_ITEM_UPDATE。现在假设您需要同时操作用户和购物车，ACTION：USER_PROFILE_UPDATE和CART_CHECKOUT。您需要处理这些操作的 reducer 将变得非常复杂，并且难以独立维护。

要避免这种情况，我们可以将 reducer 的职责分离。对于特定 action 的处理应该由特定的 reducer 处理。对于上面的示例，您可以保留两个独立的 reducers：userReducer 基于用户状态，cartReducer 基于购物车状态。如果您按照这种方式组织 reducer，就能够避免代码复杂性，并使代码结构更为清晰。

优化 reducer 函数

除了职责分离，我们还可以考虑优化 reducer 函数。在大型 redux 应用程序中，处理每个 action 都需要一些时间，特别是在执行复杂逻辑的情况下。一个 reducer 函数针对单个 action 需要一些状态更新，因此，对于使用各种优化技术来优化单个 reducer 函数会非常有用。

以下是一些可用的技术：

Switch语句优化：在编写 reducer 函数时，我们通常使用 switch 语句根据 action.type 处理不同的情况。虽然这种方法有效，但不太默认处理没有选中任何 case 的 action。这使得 redux 框架无法提前预判以及处理未知的 action，而且可能会影响性能。为了解决这个问题，可以使用 object map 来进行优化，这将在代码中消除 switch 语句。示例如下：
```
-- -------------------- ---- -------
----- ------- - ------ - ------------- ------- -- -
  ----- ------- - -
    -------------- ----- -- -
      ------ - --------- ----- ----------- --
    --
    -------- ----- -- -----
  --

  ------ --------------------- -- ------------------------
--
```
Redux Thunk：redux-thunk 是一个流行的 redux 中间件，以异步方式实现了 Redux 函数的行为。redux-thunk 允许 reducer 代码具有更高的处理能力，因为我们可以在发送 action 之前对其进行处理。通过此方法，完全可以将非纯函数代码逻辑置于 reducer 之外。示例如下：
```
function fetchPosts(subreddit) {
  return dispatch => {
    dispatch(requestPosts(subreddit));
    return fetch(`https://www.reddit.com/r/${subreddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(subreddit, json)));
  };
}
```
多级 reducer：在编写大型 redux 应用程序时，您可以在 reducer 之间构建多级关系，这将大大简化 reducer 代码。通过将 reducer 划分为更小的组件，可以轻松地组合和扩展代码库，而不需要针对整个代码库进行全面的过度设计。Redux 官方文档将如何在您的项目中使用使用 combineReducers() 函数进行详细介绍：https://redux.js.org/api/combinereducers。

总结

在使用 Redux 架构时，Reducers 职责的分离和 reducer 函数的优化对于更好地管理代码库非常重要。职责分离可以使我们的代码库更为清晰，而 reducer 函数的优化可以有效地提高我们的代码效率以及可维护性。因此，在编写 Redux 应用程序时，请务必考虑这两个重要的因素，以便更好地组织代码，提高代码效率，促进开发过程。

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