Redux代码优化：教你怎样拆分Reducer和封装Action

2023-04-27 17:50:29

Redux优化之道：拆分reducer，封装action

在Redux应用程序中，随着复杂度的不断增加，我们的应用程序可能会变得难以维护和扩展。此时，拆分reducer 和封装action 就显得至关重要。在这篇博客中，我们将深入探讨这些优化技术的优势，并通过一个具体的示例进行演示。

拆分reducer：化繁为简

想象一下你正在管理一个复杂的Redux应用程序，其中state tree包含着大量的数据。

这时，将reducer拆分成更小的部分会非常有益。拆分后的每个reducer负责管理state tree中的特定部分，使得代码更易于理解和维护。

拆分的优势

提高可维护性： 更小的reducer更容易阅读和理解，当需要修改代码时，只需修改相关的reducer即可。
提升性能： 拆分reducer可以减少不必要的计算，从而提高应用程序的性能。
增强可扩展性： 当需要添加新的功能时，只需要添加新的reducer，而不会影响其他部分。

封装action：复用与简洁

action是Redux中用于更新state tree的对象。

为了避免创建大量重复的action，我们可以将动态生成action的函数封装成一个单独的函数，称为action creator 。将action creator放在一个单独的文件夹中，便于维护和复用。

封装的优势

提高可复用性： action creator可以被多次复用，减少代码冗余。
增强简洁性： 封装action可以使action更易于理解和使用。
提高通用性： action creator可以被设计为通用，适用于各种情况。

示例：拆分与封装的实践

让我们通过一个具体示例来演示如何拆分reducer和封装action。

假设我们有一个应用程序，管理着用户的个人信息和购物车信息。

拆分reducer

// userPersonalInfoReducer.js
export default function userPersonalInfoReducer(state = {}, action) {
  switch (action.type) {
    case 'UPDATE_USER_INFO':
      return {...state, ...action.payload};
    default:
      return state;
  }
}

// cartInfoReducer.js
export default function cartInfoReducer(state = {}, action) {
  switch (action.type) {
    case 'UPDATE_CART_INFO':
      return {...state, ...action.payload};
    default:
      return state;
  }
}

封装action

// actions.js
export const getUserPersonalInfo = () => ({ type: 'UPDATE_USER_INFO' });
export const getCartInfo = () => ({ type: 'UPDATE_CART_INFO' });