React-Redux 7.1 —— useSelector：再见了 connect

React-Redux 7.1 发布了 useSelector，它是 connect 的替代品。它提供了一种更简单、更声明式的方式来管理 Redux 状态，并且不需要使用 connect() 高阶组件。

如何使用 useSelector

要使用 useSelector，首先需要在你的组件中导入它。

import { useSelector } from 'react-redux';

然后，你可以在组件的 render() 方法中使用 useSelector 来获取 Redux store 中的数据。

const MyComponent = () => {
  const counter = useSelector((state) => state.counter);

  return (
    <div>
      <h1>{counter}</h1>
    </div>
  );
};

useSelector() 函数接受一个回调函数作为参数。这个回调函数接收 Redux store 的 state 作为参数，并返回你要从 store 中获取的数据。

useSelector 的优点

useSelector 相比于 connect() 有以下优点：

• 更简单 ：useSelector 的语法更简单，更容易理解。
• 更声明式 ：useSelector 是一个声明式 API，这意味着你只需要告诉它你想从 store 中获取什么数据，而不用关心如何获取数据。
• 不需要高阶组件 ：useSelector 不需要使用高阶组件，这使得你的代码更简洁。

何时使用 useSelector

useSelector 是一个非常强大的工具，它可以用来管理 Redux 状态的任何方面。但是，它并不是万能的。在以下情况下，你可能需要使用 connect() 而不是 useSelector：

• 你需要访问 Redux store 的 dispatch() 方法 ：useSelector 只能用来获取 Redux store 中的数据，它不能用来 dispatch action。如果你需要 dispatch action，你需要使用 connect()。
• 你需要在组件的生命周期中执行某些操作 ：useSelector 只能在组件的 render() 方法中使用。如果你需要在组件的生命周期中执行某些操作，你需要使用 connect()。

总结

useSelector 是一个非常强大的工具，它可以用来管理 Redux 状态的任何方面。它简单、声明式，并且不需要使用高阶组件。但是，它并不是万能的。在某些情况下，你可能需要使用 connect() 而不是 useSelector。