У меня есть это действие в моем срезе:
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
беспокоит меня. Что это должно быть на самом деле?
- В настоящее время это необязательно. Если я уберу
?
, чтобы сделать его необязательным, я получу ошибку 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
?