0

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;

1 Answer 1

1

You made a mistake. On StartStopContainer,

const mapDispatch = ({ fetchConfigState, setConfigState });

This should be like this.

const mapDispatch = ({ requestRobotStart, requestRobotStop });
Sign up to request clarification or add additional context in comments.

1 Comment

THANK YOU. I knew it would be something stupid like that. I kept looking between the files and seeing that the structure was the same, but I was missing the trees for the forest!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.