重新选择 redux 存储的 createSelector 类型定义
2020-03-06
1490
我的 redux Reducer 具有以下状态类型:
export interface CharactersState {
characters: CharacterType[];
error: string | null;
isFetching: boolean;
}
然后我将此状态类型与 CombineReducer 一起使用来创建我的商店:
const initialState: CharactersState = {
characters: [],
error: null,
isFetching: true // initiated with fetching true on app load
};
const characters = (state = initialState, action: CharacterActionsType) => {
switch (action.type) {
// commented out reducer logic here since it is not relevant
//...
default:
return state;
}
};
const rootReducer = combineReducers({
characters
});
export type RootStateType = ReturnType<typeof rootReducer>;
export default rootReducer;
然后我在组件控制器中使用此 rootReducer:
const getCharacters = (state: RootStateType): CharactersState =>
state.characters;
export const makeCharactersList = createSelector<
RootStateType,
CharactersState,
CharacterListType[]
>(getCharacters, characters => {
return characters.characters
.map(character => {
return {
_id: character._id,
name: character.name,
description: character.description
};
})
.sort((a, b) => {
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
});
});
const mapStateToProps = (state: RootStateType) => {
return {
characters: makeCharactersList(state)
};
};
const mapDispatchToProps = (dispatch: any) => {
return {
handleDeleteClick: (_id: string | null) => {
dispatch(postDeleteCharacter(_id));
}
};
};
const connector = connect(mapStateToProps, mapDispatchToProps);
export type PropsFromRedux = ConnectedProps<typeof connector>;
export default connector(CharacterSidebar);
控制器在父组件中呈现,而无需传递任何 props:
<Sidebar />
如何为
makeCharactersList
编写正确的类型定义?看来
createSelector
应该采用 State、OwnProps、ConnectedProps 类型 - 在我看来 OwnProps 似乎只是一个空对象?
但是当我将类型定义设置为:
createSelector<
RootStateType,
{},
CharacterListType[]
我收到以下错误:
Property 'characters' does not exist on type '{}'.
1个回答
createSelector
有多个重载,但您要匹配的是:
export function createSelector<S, R1, T>(
selector: (state: S) => R,
combiner: (res: R1) => T,
): OutputSelector<S, T, (res: R1) => T>;
三个泛型是:
-
S
- 根状态的类型 -RootStateType
-
R1
- 第一个选择器选择的值,也是组合器的输入 -CharactersState
-
T
- 您从组合器返回的值 -Pick<CharacterType, '_id' | 'name' | 'description'>[]
(仅具有选定属性的字符数组)
您的
CharacterListType
可能是 #3 中挑选的属性的别名?如果是这样,那么您的代码块中的内容就是正确的。
export const makeCharactersList = createSelector<
RootStateType,
CharactersState,
CharacterListType[]
>(getCharacters, characters => {
...
Linda Paiste
2021-02-27