使用 Redux Toolkit 和 TypeScript 安装

Redux Toolkit 是一个用来简化 Redux 开发的官方工具库，它提供了一个配置好的基础结构和最佳实践来帮助您避免样板代码和常见的错误。而 TypeScript 则是一个强类型的 JavaScript 扩展，它可以在编码时捕捉类型错误，提高代码可读性和维护性。

在这篇文章中，我将介绍如何使用 Redux Toolkit 和 TypeScript 安装您的项目。我们将会使用 create-react-app 来创建一个简单的应用程序，并使用 NPM 安装 Redux Toolkit 和 TypeScript。以下是整个过程：

创建应用程序

首先，请确保您的计算机上已经安装了 Node.js 和 NPM。接着，打开终端并运行以下命令：

npx create-react-app my-app --template typescript

这将会创建一个名为 my-app 的应用程序，并使用 TypeScript 作为模板。接着，进入此目录并运行以下命令：

cd my-app
npm start

这将会启动您的应用程序，并在浏览器中打开地址 http://localhost:3000。现在，我们已经成功创建了一个 React + TypeScript 应用程序。

安装 Redux Toolkit 和 TypeScript

接下来，我们需要安装 Redux Toolkit 和 TypeScript。请在项目目录中运行以下命令：

npm install @reduxjs/toolkit react-redux @types/react-redux

这会安装 Redux Toolkit 和 react-redux，以及 TypeScript 的类型定义文件。接下来，在您的应用程序中创建一个 store 文件夹并在其中创建一个 index.ts 文件。在这个文件中，我们将创建我们的 Redux store。

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

此代码导入了 configureStore 函数和计数器的 reducer。我们使用 configureStore 函数来创建我们的 Redux store，并将计数器 reducer 添加到 store 中。接下来，我们导出了 RootState 和 AppDispatch 类型，这些类型将在应用程序中的其他部分中使用。

最后，请在您的 index.tsx 文件中添加以下代码：

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

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

此代码将应用程序包裹在 Redux 的 Provider 组件中，并传递我们的 store 作为参数。现在，您已经成功集成了 Redux Toolkit 和 TypeScript 到您的应用程序中！

结论

在这篇文章中，我们介绍了如何使用 Redux Toolkit 和 TypeScript 来简化和保护你的 Redux 应用程序。我们创建了一个使用 create-react-app 创建的简单 React 应用程序，并演示了如何安装和配置 Redux Toolkit 和 TypeScript。希望这篇文章能帮助您更好地使用 Redux Toolkit 和 TypeScript 开发应用程序。