typescript 类型的 redux-persist MigrationManifest？

Question

我有一个使用 redux 和 redux-persist 的 Typescript 项目。是否可以使用 Typescript 进行 redux-persist 迁移配置？主要困难归结为:如果你有一个 Typescript 类型的根 redux 状态，它通常/总是代表你状态的最新版本(不一定是以前持久化的)。在迁移的上下文中，您如何表示以类型化方式从持久性中读取的数据，知道它与您的状态的最新版本不匹配？一些细节:

这里是用于数据迁移的 redux-persist 的 Typescript API:

export interface MigrationManifest {
    [key: string]: (state: PersistedState) => PersistedState;
}
export interface PersistedState { _persist?: PersistState }
export interface PersistState { version: number; rehydrated: boolean; }

有道理，您提供了一个 MigrationManifest，其中的键是版本号，值是接收持久状态并返回新持久状态的函数。由于 PersistedState 只是一个接口(interface)，因此您似乎可以有一个传入类型并返回一个不同的类型(在您的数据模式发生变化的情况下)。

假设我有以下类型作为我的根持久存储类型。它符合PersistedState接口(interface):

type RootState = {
    name: string,
    address: Address,
    _persist?: PersistState
}

type Address = {
    street: string
    city: string
}

在未来的某个时候，我将我的模型更新为:

type RootState = {
    name: string,
    address: Address,
    _persist?: PersistState
}

type Address = {
    vacant: boolean
}

我需要提供一个看起来像这样的迁移:

const manifest: MigrationManifest = {
  1: (state: PersistedState) => {
    const persistedState = state as ???
    const migratedState: RootState = migrateState(persistedState)
    return migratedState
  }
}

我苦苦挣扎的地方是获取传入状态的类型(我转换为 ??? 的地方)。在像这样的简单示例中，很容易维护状态的每个版本的记录，并在必要时导入和使用它们:

import { RootState as RootState_v0 } from 'types_v0.ts'

const manifest: MigrationManifest = {
  1: (state: PersistedState) => {
    const persistedState = state as RootState_v0
    const migratedState: RootState = migrateState(persistedState)
    return migratedState
  }
}

实际上，事情并没有那么简单；我有一个复杂的状态树，并非所有状态树都在一个中央且易于版本化的位置定义。

我可以想到的一个解决方案，但我不知道是否可行，是以某种方式创建我的 RootState 类型的一个版本，其中包含所有中间类型别名和接口(interface)名称“已溶解” .像这样的东西:

type RootState_v0 = {
    name: string,
    address: {
        street: string
        city: string
    },
    _persist?: {
        version: number,
        rehydrated: boolean
    }
}

如果我能以某种自动方式创建它，那么在迁移中保留和使用它会变得简单方便。

知道是否可行，或者关于如何在 react-redux 迁移中有效使用 Typescript 的任何其他建议？

Answer 1

遇到同样的问题。

我已经通过手动创建 PersistedState 的扩展类型修复了它。我们可以直接扩展它，因为它是可选的并且可以是未定义的。

似乎 redux-persist 不需要泛型来使一切都与 TS 一起工作。所以我写了解决方法。示例是关于重命名状态中的字段，但它可以很容易地扩展。重命名 field1 并使 field1Renamed 处于新状态的主要目标。

import { createMigrate } from 'redux-persist';
import { MigrationManifest, PersistState } from 'redux-persist/es/types';

type RootAppState = {
    field1Renamed: number;
    field2: number;
    field3: number;
    field4: number;
    field5: number;
    field6: number;
    field7: number;
}

type PersistAppStateV1 = Pick<
  RootAppState,
  | 'field1Renamed'
  | 'field2'
  | 'field3'
  | 'field4'
  | 'field5'
> & {
  _persist: PersistState;
};

type PersistAppStateV0 = Omit<PersistAppStateV1, 'field1Renamed'> & {
    field1: RootAppState['field1Renamed'];
};

const migrations: MigrationManifest = {
  1: (state): PersistAppStateV1 | undefined => {
    if (!state) {
      return state;
    }
    const { field1, ...otherState } = state as PersistAppStateV0;
    return {
      ...otherState,
      field1Renamed: field1,
    };
  },
};

const migrate = createMigrate(migrations);

const persistConfig = {
  key: 'root',
  version: 1,
  migrate,
  whitelist: [
    'field1Renamed',
    'field2',
    'field3',
    'field4',
    'field5',
  ],
};