Как подключить компонент React к моему хранилищу Redux с помощью селектора, который принимает аргумент в Typescript?

Question

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

const selectThing = (state: RootState, id: string) => state.things.get(id);

Затем, чтобы получить доступ к id в моем mapState, я передаю в свой компонент Props:

const mapState = (state: RootState, props: Props) => ({
  thing: selectThing(state, props.id)
})

Однако, когда я подключаю все в соответствии с документами , мне говорят, что "PropsFromRedux ссылается на себя по кругу" Это имеет смысл, потому что сейчас я передаю PropsFromRedux обратно через мой mapState метод, поскольку он расширяется на Props:

import { connect, ConnectedProps } from 'react-redux'

interface SomeComplicatedThing {
  //...
}

interface RootState {
  things: Map<string, SomeComplicatedThing>;
}

const selectThing = (state: RootState, id: string) => state.things.get(id);

const mapState = (state: RootState, props: Props) => ({
  thing: selectThing(state, props.id)
})

const mapDispatch = {
  //whatever
}

const connector = connect(
  mapState,
  mapDispatch
)

//PropsFromRedux circularly references itself
type PropsFromRedux = ConnectedProps<typeof connector>

interface Props extends PropsFromRedux {
  id: string
}

const MyComponent = (props: Props) => (
  <div>whatever</div>
)

export default connector(MyComponent)

Есть ли лучший способ приблизиться к этому? Как связать компонент с селектором, который принимает аргумент в Typescript? Благодаря.

Answer 1

Просто отделите ваши BaseProps от ваших Redux Props, а затем добавьте их обратно в конце. Я не уверен, почему в документах с избыточностью есть это go в виде циклической ссылки при довольно распространенном использовании connect.

import { connect, ConnectedProps } from 'react-redux';
import { type } from 'os';

interface SomeComplicatedThing {
  //...
}

interface RootState {
  things: Map<string, SomeComplicatedThing>;
}

const selectThing = (state: RootState, id: string) => state.things.get(id);
interface BaseProps {
  id: string;
}
const mapState = (state: RootState, props: BaseProps) => ({
  thing: selectThing(state, props.id),
});

const mapDispatch = {
  //whatever
};

const connector = connect(mapState, mapDispatch);

//PropsFromRedux circularly references itself
type PropsFromRedux = ConnectedProps<typeof connector>;


const MyComponent = (props: PropsFromRedux & BaseProps) => {
return <div>whatever</div>};

export default connector(MyComponent);