How the parameter of the callback function in useSelector hook knows the state of the redux store?

Viewed 98

I am studying redux. I came across with useSelector hook that takes a callback function. The parameter of the callback function is the state of the store. My question here is how simply importing useSelector hook from react-redux enables the parameter of the callback function equivalent to the state of the store? Where is the connection between that parameter and the store?

Example

import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector((state) => state.counter)
  return <div>{counter}</div>
} 
1 Answers

As you already found out yourself, react-redux relies on the context provider/consumer pattern provided by react itself. react-redux probably assumes that there is a specific context provider somewhere higher up in the component tree. So the connection between the state parameter and the store is made based on a name convention: https://github.com/reduxjs/react-redux/blob/master/src/components/Context.ts#L20

Related