小试牛刀，依赖升级血泪史

前端

2023-07-12 06:55:54

升级 reselect V5：应对 Breaking Change 的指南

reselect V5 概述

reselect 是一个流行的 React 库，用于优化组件性能。它的最新版本 V5 带来了重大更新，包括使用 TypeScript 重写，新增开发检查以及更新的导出方式。

Breaking Change

升级 reselect V4 至 V5 时，您可能会遇到以下 breaking change：

函数签名：

createSelector 函数签名已更新，现在需要明确指定输入和输出选择器的类型。
createStructuredSelector 函数签名已更新，现在需要指定一个对象映射，其中键是输入选择器的名称，值是输出选择器的工厂函数。

导出方式：

reselect 模块不再导出 createSelector 和 createStructuredSelector 函数。相反，它们从 @reduxjs/toolkit/reselect 模块导出。

API：

Selector 类型不再支持泛型类型参数。
useSelector 钩子现在接收一个额外的参数 options，用于指定选择器如何与 store 交互。

应对 Breaking Change

要应对这些 breaking change，请按照以下步骤操作：

检查函数签名： 审查您的代码并更新所有 createSelector 和 createStructuredSelector 调用，以匹配新的签名。
更新导出： 将 import { createSelector, createStructuredSelector } from 'reselect' 更改为 import { createSelector, createStructuredSelector } from '@reduxjs/toolkit/reselect'。
修改 API： 更新您的代码以使用新的 Selector 类型和 useSelector 钩子语法。

避免踩坑

为了避免在升级时遇到问题：

备份代码： 在升级之前，备份您的代码库。
更新到最新版本： 使用最新版本的 reselect。
仔细阅读更新日志： 熟悉所有 breaking change。
修改代码： 根据 breaking change 更新您的代码。
测试代码： 在升级后全面测试您的应用程序。

代码示例

V4 代码：

import { createSelector } from 'reselect';

const selectCounter = state => state.counter;

const selectDoubledCounter = createSelector(
  selectCounter,
  counter => counter * 2
);

V5 代码：

import { createSelector } from '@reduxjs/toolkit/reselect';

const selectCounter = (state: any) => state.counter;

const selectDoubledCounter = createSelector([selectCounter], (counter) => counter * 2);

常见问题解答

1. 升级后为什么我的应用程序崩溃了？

检查您的代码是否包含与 breaking change 相关的任何错误。

2. 我如何更新我的 useSelector 钩子？

useSelector 现在接收一个额外的 options 参数。您需要更新您的代码以指定这些选项。

3. 为什么我看到一个 TypeError: Cannot read properties of undefined 错误？

确保您的选择器函数不返回 undefined。

4. 我如何迁移到 TypeScript 版本？

reselect V5 使用 TypeScript 重写。您需要将您的代码库迁移到 TypeScript 才能使用它。

5. 我是否必须立即升级到 V5？

否，您不一定要立即升级。但是，建议您在方便时升级以利用新功能和改进。

结论