Тип редукционного действия с использованием ownProps в Redux Toolkit - PullRequest
0 голосов
/ 18 апреля 2020

У меня есть это действие в моем срезе:

setTimerState(state, { payload }: PayloadAction<{ timer: StepTimer, timerState: CookingTimerState }>) {
  const { timer, timerState } = payload
  state.stepTimers
    .find(t => t.timerId === timer.timerId)!
    .state = timerState
}

Я написал свое mapDispatch действие, чтобы я мог очень просто вызвать его в своем компоненте:

type Props = {
  timer: StepTimer
  startTimer?: any // FIXME
};

const StepTimerComponent = ({ timer, startTimer }: Props) =>
  <StepTimerButton onClick={ startTimer }>
    { timer.label }  
  </StepTimerButton>

const actions = (dispatch: AppDispatch, { timer }: Props) => ({
  startTimer: () => dispatch(setTimerState({ timer, timerState: CookingTimerState.Running }))
})

const StepTimerContainer = connect(null, actions)(StepTimerComponent)
export default StepTimerContainer

Это отлично работает, но тип Props беспокоит меня. Что это должно быть на самом деле?

  1. В настоящее время это необязательно. Если я уберу ?, чтобы сделать его необязательным, я получу ошибку TS от вызывающего компонента:
Property 'startTimer' is missing in type '{ timer: StepTimer; key: number; }' but required in type 'Props'.  TS2741
    13 |     timers.length ? timers.map((timer, i) =>
  > 14 |       <StepTimerContainer timer={ timer } key={ i }/>
       |        ^
    15 |     ) : "No timers."

Но разве функция connect не обеспечивает такую ​​поддержку завернутый компонент?

startTimer: any что это должно быть на самом деле ??? Я пробовал несколько перестановок, и они получают ошибки либо из типа onClick, либо, что более важно, из последнего аргумента вызова connect. Например, startTimer: PayloadAction<{timer: StepTimer, timerState: CookingTimerState}> получает обе эти ошибки. (и затем попытка onClick={ () => startTimer() } говорит, что startTimer не вызывается.

Какой правильный тип для startTimer?

...