I have one Redux container component, HomeContainer, which connects the Home component. When I use the HomeContainer component in my App, Typescript is happy, because it knows that HomeContainer provides all the props that Home needs, and therefore doesn't need any props of its own.
Home
type HomeProps = {
cuvettes: number | null,
pipettes: number | null,
fetchConfigState: Function,
setConfigState: Function
}
const Home = ({ cuvettes, pipettes, fetchConfigState, setConfigState }: HomeProps) => {
// ...the rest of the component...
return (
<Box>
{/* ...other stuff ... */}
<StartStopContainer/>
</Box>
);
};
export default Home
HomeContainer
const mapState = ({ data }: RootState) => ({
cuvettes: data.cuvettesCount,
pipettes: data.pipettesCount
})
const mapDispatch = ({ fetchConfigState, setConfigState });
const HomeContainer = connect(mapState, mapDispatch)(Home)
export default HomeContainer;
App
const App = () => {
// ...other stuff...
return <HomeContainer/>
}
However, typescript reports an error on the call to StartStopContainer in the Home component above, saying that I need to give it the props that StartStop needs. But StartStopContainer is providing them from connect, just like HomeContainer is! Why is one working but not the other?
StartStop
type StartStopProps = {
requestRobotStart: Function,
requestRobotStop: Function,
robotMode: RobotMode
}
const StartStop = ({ requestRobotStart, requestRobotStop, robotMode }: StartStopProps) => {
const start: MouseEventHandler = async () => await requestRobotStart()
const stop: MouseEventHandler = async () => await requestRobotStop()
return (
<Box>
<Button onClick={ start } variant='contained'>START</Button>
<Button onClick={ stop } variant='contained'>STOP</Button>
</Box>
)
}
export default StartStop;
StartStopContainer
const mapState = ({ data }: RootState) => ({
robotMode: data.robotMode
})
const mapDispatch = ({ fetchConfigState, setConfigState });
const StartStopContainer = connect(mapState, mapDispatch)(StartStop)
export default StartStopContainer;