Redux 中的 useSelector

在 Redux 中，使用 useSelector() hook 可以在函数组件中访问 Redux store 中的 state。

使用方法

import { useSelector } from 'react-redux';

function MyComponent() {
  const myState = useSelector(state => state.myReducerName.myStatePropertyName);

  return (
    <div>
      <p>{myState}</p>
    </div>
  );
}

在上面的例子中，useSelector() 的参数是一个回调函数，这个回调函数接收一个参数 state，它是当前 Redux store 中的 state。这个回调函数需要返回我们需要的那部分 state。在上面的例子中，我们获取了 myReducerName reducer 的 myStatePropertyName 属性。

注意，在使用 useSelector() 时，应该只获取与当前组件相关的那部分 state。

Memoization

useSelector() 内部使用了 memoization 技术，当只有部分 state 变化时，它只会重新计算那部分 state，不会全局重新计算。这样可以避免不必要的重新渲染。

hooks 不可嵌套

在函数组件中使用 useSelector() 时，不要把它嵌套在另一个回调函数中，例如 useEffect() 或者 useCallback()。因为 hooks 不能嵌套使用。如果需要使用多个 hooks，应该把它们都放到组件的最顶层。

示例代码：

// 错误的示例：
function MyComponent() {
  useEffect(() => {
    const myState = useSelector(state => state.myReducerName.myStatePropertyName);
    // ...
  }, []);

  return <div>...</div>;
}

// 正确的示例：
function MyComponent() {
  const myState = useSelector(state => state.myReducerName.myStatePropertyName);

  useEffect(() => {
    // ...
  }, []);

  return <div>...</div>;
}

总结

useSelector() 是一个非常有用的 hook，它可以让我们在函数组件中使用 Redux store 中的 state，而无需编写额外的代码来访问它。当我们只需要部分 state 时，使用 useSelector() 可以避免不必要的重新渲染。注意，不要把 useSelector() 嵌套在另一个回调函数中，应该放到组件的最顶层。