我正在创建一个Redux存储增强器,它接受一个函数来序列化Redux状态。我将构建商店并设置订阅更改 - 在每次更改时,我将序列化状态。对于这个MCVE,我忽略了订阅方面,只是立即调用序列化函数。
但是,由于函数的高阶性质,我无法将状态(序列化函数所需)的泛型类型与商店创建者返回的泛型类型相关联:
// Copied and reduced from Redux 4.0.1
type Reducer<S = any> = (
state: S | undefined,
) => S
type DeepPartial<T> = { [K in keyof T]?: DeepPartial<T[K]> }
interface Store<S = any> {
getState(): S
}
type StoreEnhancer<Ext = {}, StateExt = {}> = (
next: StoreEnhancerStoreCreator
) => StoreEnhancerStoreCreator<Ext, StateExt>
type StoreEnhancerStoreCreator<Ext = {}, StateExt = {}> = <
S = any,
>(
reducer: Reducer<S>,
preloadedState?: DeepPartial<S>
) => Store<S & StateExt> & Ext
// My reduced code
interface Config<S> {
serialize: (state: S) => string;
}
const storage = <S>(config: Config<S>): StoreEnhancer => createStore => (reducer, preloadedState) => {
const { serialize } = config;
const theStore = createStore(reducer, preloadedState);
const state = theStore.getState();
const serializedState = serialize(state);
return theStore;
}
(Qazxswpoi)
错误是:
playground
错误消息令人讨厌,因为我很确定这两个const serializedState = serialize(state);
^~~~~
Argument of type 'S & {}' is not assignable to parameter of type 'S'.
是无关的;更改S
中的定义以使用StoreEnhancerStoreCreator
而不是X
更改此错误消息。
如何将我的泛型类型参数与S
上定义的泛型参数相关联?
我同意@ matt-mccutchen发现的问题。 StoreEnhancerStoreCreator
是一个泛型函数,因此StoreEnhancerStoreCreator
是一个带有(reducer, preloadedState) => {
泛型类型参数的泛型函数,这就是编译器报告两个S
类型之间不兼容的原因。
我建议的解决方案是S
不是通用的,我可以告诉reducer和有效负载应该具有与StoreEnhancerStoreCreator
相同的泛型类型参数。此解决方案需要在Config
和StoreEnhancerStoreCreator
中添加额外的类型参数:
StoreEnhancer
问题是type Reducer<S = any> = (
state: S | undefined,
) => S
type DeepPartial<T> = { [K in keyof T]?: DeepPartial<T[K]> }
interface Store<S = any> {
getState(): S
}
type StoreEnhancer<S, Ext = {}, StateExt = {}> = (
next: StoreEnhancerStoreCreator<S>
) => StoreEnhancerStoreCreator<S, Ext, StateExt>
type StoreEnhancerStoreCreator<S, Ext = {}, StateExt = {}> = (
reducer: Reducer<S>,
preloadedState?: DeepPartial<S>
) => Store<S> & Ext
// My Code
interface Config<S> {
serialize: (state: S) => string;
}
const storage = <S>(config: Config<S>): StoreEnhancer<S> => createStore => (reducer, preloadedState) => {
const { serialize } = config;
const theStore = createStore(reducer, preloadedState);
const state = theStore.getState();
const serializedState = serialize(state);
return theStore;
}
被宣布(间接地,通过storage
)返回StoreEnhancer
,这是一个必须适用于所有StoreEnhancerStoreCreator
的通用函数。然而,给S
的一个特定的召唤产生了一个商店创建者只适用于一个storage
:S
的S
通过。
在我看来,你可以生成config
的唯一方法是,如果你开始使用StoreEnhancerStoreCreator
函数本身在serialize
中是通用的。我不确定这在你的场景中是否有意义。也许熟悉Redux的人会更好地了解该怎么做。
S
让我走上正轨:
此解决方案需要在Titian Cernicova-Dragomir's answer和
StoreEnhancerStoreCreator
中添加额外的类型参数
但是,适当的类型参数已经存在;我只是不明白如何正确使用它。具体来说,StoreEnhancer
返回带有默认类型参数的StoreEnhancer
。如果我改为设置类型参数,我现在知道将返回什么样的状态:
StoreEnhancerStoreCreator