react-redux 库中比较常用的自定义 hooks，useSelector 和 useDispatch

react-redux 库提供了两个主要的自定义 Hooks，它们非常常用，分别是 useSelector 和 useDispatch。这两个 Hooks 分别用于访问 Redux store 中的状态和分发 actions。

useSelector:

useSelector Hook 用于访问 Redux store 中的状态。它接受一个选择器函数作为参数，这个函数接收整个 Redux store 的状态作为参数，并返回你想要从状态中提取的数据。

import { useSelector } from 'react-redux';

function MyComponent() {
  const myData = useSelector(state => state.myData);

  // 在组件中使用提取到的 myData
}

当选择器函数的返回值发生变化时，useSelector 会触发组件重新渲染。useSelector 还可以接受一个可选的第二个参数，这是一个比较函数，用于比较前后两次选择器函数的返回值，以确定是否需要重新渲染组件。

useDispatch:

useDispatch Hook 用于分发 Redux actions。它返回 Redux store 的 dispatch 函数，你可以使用这个函数来分发 actions，从而触发 store 中的状态更新。

import { useDispatch } from 'react-redux';

function MyComponent() {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch({ type: 'MY_ACTION', payload: 'myPayload' });
  };

  // 在组件中使用分发 action 的 handleClick 函数
}

useDispatch 让你能够在组件中轻松地触发状态更新，而无需使用 connect 高阶组件将 dispatch 函数传递给组件。

这两个 Hooks 是 react-redux 中最常用的自定义 Hooks，它们使得在 React 组件中与 Redux store 交互变得更加简单和直观。在大多数情况下，你可以使用 useSelector 和 useDispatch 替换 connect 高阶组件，从而简化代码并提高可读性。

写个 demo 展示下它们的用法

这里有一个简单的 Redux 示例，展示了如何使用 Redux 管理应用程序的状态。这个示例是一个简单的计数器应用程序，可以增加和减少计数。

首先，让我们安装 Redux 和 React-Redux：

npm install redux react-redux

然后，我们来创建一个 Redux store。在 store.js 文件中：

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(rootReducer);

export default store;

接下来，我们将创建一个 React 组件来展示计数器。在 Counter.js 文件中：

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

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

export default Counter;

最后，我们需要将 Redux store 与 React 应用程序连接。在 index.js 文件中：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Counter />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

现在，你应该可以运行这个简单的计数器应用程序，看到计数器的值随着你点击 "+" 和 "-" 按钮而增加和减少。这个示例展示了如何使用 Redux 进行状态管理，以及如何在 React 组件中使用 useSelector 和 useDispatch 钩子与 Redux store 进行交互。