Redux Toolkit

Redux toolkit 是一个旨在简化创建redux store并提供简单状态管理的npm包。在Redux toolkit引入之前，使用纯redux进行状态管理是复杂的。Redux toolkit作为redux的封装，封装了必要的功能。Redux toolkit灵活并为大型应用程序创建store提供了简单的方式。它遵循SOPE原则，即简单（Simple），倾向性（Opinionated），强大（Powerful）和有效（Effective）。

在Redux中遇到的问题

Redux Toolkit是为解决Redux中我们面临的三个常见问题而创建的。

• 配置存储需要太多代码。
• 编写太多样板代码来派发动作并将数据存储在reducer中。
• 需要使用额外的包如Redux-Thunk和Redux-Saga来执行异步操作。

Redux Toolkit（RTK）的好处

• 相比于Redux，更容易管理状态。
• 大多数功能的样板代码已经提供。
• 官方推荐的SOPE库。
• 提供了包装函数，可以减少代码行数。

Redux Toolkit提供的重要功能

• 在基本的Redux中，createStore函数被configureStore函数包装，自动提供了middlewares和enhancers。
• 经典的reducer被createReducer函数替换，使代码更短、更简单易懂。
• action创建器函数的实用程序createAction()。
• Redux的createSlice()函数可以方便地替代create action和create Reducer函数，整合为单个函数。
• Redux的createAsyncThunk()函数接受Redux字符串作为参数，并返回一个Promise。
• 帮助执行CRUD操作的Redux createEntityAdapter()实用程序。

安装和导入Redux Toolkit（RTK）

要在我们的项目中安装Redux Toolkit，请在终端中输入以下命令。

// Installing  
# NPM  
npm i @reduxjs/toolkit  
npm i react-redux        // We also need basic redux with this application  
# Yarn  
yarn add @reduxjs/toolkit

我们在代码中只导入了必要的函数

// Importing   
import { configureStore } from '@reduxjs/toolkit';            // Creates a store  
import { createSlice } from '@reduxjs/toolkit';              // Combines and creates reducer

package.json中的依赖关系发生了变化，它们如下所示：

"dependencies": {  
    "react": "^17.0.2",  
    "react-dom": "^17.0.2",  
   **"@reduxjs/toolkit": "^1.6.1",**  
 **"react-redux": "^7.2.5"**  
}