这个 useSelector 函数如何返回状态？

Question

Sorry for this silly question but in one of the Redux videos I saw this function.

const counter = useSelector(state => state.counter)

So, to my understanding how functions work is that you pass in something as the argument and it returns something but here inside useSelector we are getting access to state by passing it as an argument and then accessing it's variables(counter) further? How does this work? Am I missing some Javascript fundamental?

Answer 1

state => state.counter

Can be expressed as

function(state) { // state is just a parameter and can be any name
  return state.counter;
}

You can give it a name, and pass it instead.

function selectorFunction(state) {
  return state.counter;
}

useSelector(selectorFunction);

A callback function is one which will be called at a certain point in time by the parent function. We pass a callback function to the useSelector hook. This function is called the selector function . The useSelector hook calls this selector function and passes the redux store you created as the first argument .

You can check the source code on how your selector function is called.

...
const storeState = store.getState(); // this is your redux store
const newSelectedState = selector(storeState); // 'selector' is 'your' callback function passed to 'useSelector' hook. 
...

Just like event listener callback functions where the first argument is the event object, similarly selector callback function's first argument is the redux store.

The variable name can be anything you like. A more reasonable would be store instead of state

function selectorFunction(store) {
  return store.counter;
}

useSelector(selectorFunction);

This when repetitive becomes a bit long to type and hence, compact arrow function are better suited for callback functions.

useSelector((store) => store.counter);