Как создать модифицированный пользовательский хук useSelector с помощью TypeScript - PullRequest
Новая
       29

Как создать модифицированный пользовательский хук useSelector с помощью TypeScript

0 голосов
/ 24 апреля 2020

Я хочу создать пользовательский хук для удаления большого количества шаблонного кода из кода многократного использования.

Моя настройка приращения включает в себя несколько комбинированных редукторов, поэтому получение значений приращения с использованием useSelector из react-redux влечет за собой довольно много стандартного кода.

Допустим, у меня есть admin редуктор внутри моего rootReducer. Я мог бы получить одно из его значений следующим образом: 

const MyComponent: FC = () => {
  const value = useSelector<IRootReducer, boolean>(
    ({ admin: { val1 } }) => val1
  )

  // rest of code
}

Я хочу создать пользовательский хук useAdminSelector на основе реализации выше, чтобы его можно было использовать следующим образом: 

const value = useAdminSelector<boolean>(({ val1 }) => val1)

В определении реализации я бы хотел, чтобы мой интерфейс IAdminReducer также был реализован.

Вот моя попытка: 

export function useApplicantSelector<T>((applicantState: IApplicant): T => (retVal)): T {
  return useSelector<IReducer, T>((state) => (state.applicant)) 
}

Но это решение явно синтаксически некорректно.

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Как насчет 

export const useAdminSelector = <T>(adminSelector: (adminState: IAdminReducer) => T) => {
    return useSelector((state: IRootReducer) => adminSelector(state.admin))
}

, а затем 

const value = useAdminSelector<boolean>(({ booleanVal }) => val1)

Если я вас правильно понимаю, я думаю, что это должно решить ваши проблемы:)

0 голосов
/ 24 апреля 2020

Вам не нужен специальный капюшон. Подробнее о перевыберите или аналогичный. Если вам не нужны библиотеки - просто напишите свою функцию выбора 

const selectVal1 = ({ admin }: IRootReducer) => admin.val1;

и используйте ее 

const val1 = useSelector(selectVal1);

ОБНОВЛЕНИЕ

Что об этом?

1014 * [JS] 
const useAdminState = (key) => useSelect((state) => state.admin[key]);

[TS] 

const useAdminState = (key: keyof IRootReducer['admin']) => useSelect(({ admin }: IRootReducer) => admin[key]);
...