Блог

Главная - Вопросы по программированию - Подключение React Redux к компоненту в Typescript

Подключение React Redux к компоненту в Typescript

#typescript #react-native #redux #react-redux

#typescript #react-native #сокращение #react-redux

Вопрос:

Я хочу подключить React Redux к моему компоненту в typescript. Я использую эти документы в качестве шаблона.

У меня есть следующий тип, определяющий состояние, которое у меня есть в хранилище Redux (есть только один):

 export interface rootState {
  favourites: ImageThumbnail[]
}

Мой компонент:

 ...

interface StateProps {
  favourites: NasaImageThumbnail[]
}

interface DispatchProps {
  addFavourite: () => void
  removeFavourite: () => void
}

interface OwnProps {
  ...
}

const mapState = (state: rootState) => ({
  favourites: state.favourites
})

const mapDispatch = {
  addFavourite: () => ({ type: 'ADD_FAVOURITE' }),
  removeFavourite: () => ({ type: 'REMOVE_FAVOURITE' })
}

type combinedProps = StateProps amp; DispatchProps amp; OwnProps

//Component body

export default connect<StateProps, DispatchProps, OwnProps>(
  mapState,
  mapDispatch
)(Component)

mapState в функции connect выдает следующую ошибку:

Никакая перегрузка не соответствует этому вызову. Последняя перегрузка выдала следующую ошибку. Аргумент типа ‘(state: rootState) => { избранное: ImageThumbnail[]; }’ не может быть присвоен параметру типа ‘MapStateToPropsParam<StateProps, ownProps, DefaultRootState>’. Тип ‘(state: rootState) => { избранное: ImageThumbnail[]; }’ не может быть присвоен типу ‘MapStateToPropsFactory<StateProps, ownProps, DefaultRootState>’.

Ответ №1:

Не передавайте все эти общие аргументы в connect . Обычно они должны быть выведены.

Фактически, для этой страницы мы особенно рекомендуем использовать ConnectedProps<T> метод для определения типа реквизитов, переданных из connect вашего компонента.

Вы также должны отметить, что:

Комментарии:

1. Любопытно, что рекомендация отдавать предпочтение перехватам redux. Я новичок в React-Redux, но разрабатываю большой проект с использованием redux-toolkit. Моя самая большая проблема с перехватами заключается в том, что компонент обладает знаниями о форме корневого состояния, и я не могу повторно использовать его или реорганизовать свой код без изменения селектора в каждом компоненте. В настоящее время я подключаю свои компоненты в своем файле slice после создания фрагмента состояния, поэтому, если я изменю состояние, все мои необходимые обновления подключения будут в одном месте. Мои проблемы с перехватом — это возможность повторного использования и привязка компонентов к форме состояния. Может быть, мое беспокойство ошибочно?

2. Вопрос понятен, но не вызывает серьезной озабоченности. Вопрос «форма состояния селектора» применяется независимо от того, используете ли вы connect mapState или useSelector , потому что оба из них получают корневой объект состояния Redux в качестве своего единственного аргумента. Никакой разницы нет. Если вы сильно заинтересованы в том, чтобы избежать перезаписи анонимных селекторов в компонентах, создайте повторно используемый селектор, который можно вызывать во многих компонентах вместо этого, так что вам нужно редактировать только редуктор и этот селектор, если форма состояния когда-либо изменится.

3. Более подробную информацию об этом смотрите в моих сообщениях, в которых используются селекторы повторного выбора для инкапсуляции и производительности , мысли о перехватах реакции, сокращении и разделении проблем и ReactBoston 2019: перехватчики, HOC и компромиссы . Это также хороший аргумент в пользу использования TypeScript.

4. О, и я бы не стал определять соединения компонентов в файле фрагмента. Определенно не идиоматический подход, и tbh я не могу вспомнить, чтобы кто-либо еще когда-либо делал это.

5. Подключение в файле slice было тем, что я сделал, потому что я не хотел импортировать другие части моего проекта в свой компонент (за исключением интерфейсов, которые я сохраняю в другом файле для каждой функции). Я рассуждал так: если я определяю свой фрагмент состояния в одном файле, подключенные компоненты связаны с состоянием, так почему я должен устанавливать соединение в файле компонента? Вид подключения в нижней части файла компонента никогда не казался мне приятным, хотя я видел примеры этого. Я полный новичок в redux-react и благодарю за Redux-Toolkit.