使用 useAppSelector - TypeScript

如果你正在使用 Redux Toolkit 和 TypeScript 来编写你的 Redux 应用程序，那么 useAppSelector 钩子会是你的好帮手。使用 useAppSelector，你可以轻松地从 Redux store 中获取状态，并且 TypeScript 会对你的代码进行类型检查。

安装

在开始使用 useAppSelector 之前，确保你的应用程序中安装了以下库：

• react-redux
• @reduxjs/toolkit
• typescript

你可以使用以下命令来安装这些库：

npm install react-redux @reduxjs/toolkit typescript

使用

首先，你需要在你的应用程序中创建一个 Redux store。以下是一个基本的示例：

import { configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './reducers';

const store = configureStore({
  reducer: rootReducer
});

接下来，你需要把这个 store 与你的 React 应用程序连接起来。使用 Provider 组件来包裹你的应用程序，将 store 作为 Provider 的 props 传递进去：

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

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

现在，你可以在你的组件中使用 useAppSelector 获取状态了。以下是一个示例：

import { useAppSelector } from '../../store';

const Counter: React.FC = () => {
  const count = useAppSelector(state => state.counter.value);
  return (
    <div>
      <h1>Counter: {count}</h1>
    </div>
  );
}

可以看到，我们通过 useAppSelector 钩子获取了 Redux store 中的计数器值，并将其渲染到了组件中。

请注意，你需要传递一个函数作为 useAppSelector 的参数，并且该函数应该返回你需要获取的状态。在 TypeScript 中，你还需要指定返回的状态的类型。

结论

使用 useAppSelector 钩子能够让你轻松地在 TypeScript 中从 Redux store 中获取状态，并进行类型检查。如果你正在使用 Redux Toolkit 和 TypeScript 来编写你的应用程序，那么 useAppSelector 绝对是你的好帮手。