повторно выбрать определения типа createSelector для хранилища избыточности

У меня есть следующий тип состояния для моего редуктора:

export interface CharactersState {
  characters: CharacterType[];
  error: string | null;
  isFetching: boolean;
}

Затем я использую этот тип состояния с combReducer для создания своего магазина:

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);

Контроллер отображается в родительском компоненте без передачи каких-либо реквизитов:

<Sidebar />

Как написать правильное определение типа для makeCharactersList? Кажется, что createSelector должен принимать типы State, OwnProps, ConnectedProps — в моем случае кажется, что OwnProps будет просто пустым объектом?

Но когда я устанавливаю определение типа на:

createSelector<
  RootStateType,
 {},
  CharacterListType[]

Я получаю следующую ошибку:

Свойство «символы» не существует для типа «{}».


typescript redux reselect
person Miha Šušteršič    schedule 06.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Существует несколько перегрузок для createSelector, но вам подходит следующая:

export function createSelector<S, R1, T>(
  selector: (state: S) => R,
  combiner: (res: R1) => T,
): OutputSelector<S, T, (res: R1) => T>;

Три дженерика:

  1. S - тип корневого состояния - RootStateType
  2. R1 - значение, выбранное первым селектором, которое также является входом для объединителя - CharactersState
  3. T — значение, которое вы возвращаете из объединителя — Pick<CharacterType, '_id' | 'name' | 'description'>[] (массив символов только с выбранными свойствами)

Вероятно, ваш CharacterListType является псевдонимом выбранных свойств в #3? Если это так, то вы правильно указали его в своем кодовом блоке.

export const makeCharactersList = createSelector<
  RootStateType,
  CharactersState,
  CharacterListType[]
>(getCharacters, characters => {
...
person Linda Paiste    schedule 27.02.2021