使用 useSelector - JavaScript

在React的Redux库中，useSelector是一个用于从Redux存储中选择状态的自定义钩子函数。它允许程序员在函数式组件中订阅Redux存储中的状态，并在状态更改时重新渲染组件。

使用场景

当我们需要从Redux存储中选择某些状态值并将其用作组件渲染的一部分时，useSelector非常有用。例如，当我们需要显示一个计数器组件，当计数器值改变时更新屏幕上的内容。

代码示例

import React from 'react';
import { useSelector } from 'react-redux';

const Counter = () => {
  const count = useSelector(state => state.counter);

  return (
    <div>
      <h1>Counter Value: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

在上面的示例中，我们使用useSelector钩子从Redux存储中获取了名为counter的状态值，并将其分配给count变量。然后，我们可以在组件中使用这个状态值来更新UI。

注意事项

• useSelector只会在状态变更时重新渲染使用它的组件。这意味着，如果被选择的状态未发生改变，组件将不会重新渲染，从而提高性能。
• useSelector可以接受一个选择器函数作为参数，该函数可以进行更复杂的状态选择。选择器函数接受整个Redux存储作为参数，并返回一个子集状态值的对象。
• useSelector可以处理跨组件共享状态，因为它使用Redux存储。
• 与其他React钩子函数一样，useSelector仅在函数式组件中可用。

结论

使用useSelector是在函数式组件中选择和订阅Redux存储中状态的一种简单且直观的方法。它提供了一个轻量级的方式来获取Redux存储中的状态值，并将其用于组件的渲染。