如何基于TS在React中使用Redux Toolkit

什么是Redux

• Redux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理.
• 可以帮助你开发出行为稳定可预测的、运行于不同的环境（客户端、服务器、原生应用）、易于测试的应用程序。不仅于此，它还提供超爽的开发体验，比如有一个与时间旅行调试器相结合的实时代码编辑.
• 可以将 Redux 与 React 或其他视图库一起使用。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态

Redux的三大原则

• 单一数据源
• State是制度的
• 使用纯函数来执行修改

Redux的不足

• Redux的初始化配置过于复杂
• 需要添加很多的包才能正常使用,例如 redux-immutable,redux-thunk,immutable.
• Redux需要太多的样板代码,例如臭名昭著的 Switch 语句

为什么是Redux Toolkit

• Redux Toolkit是Redux官方推荐的编写Redux逻辑的方法.
• 它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能.
• Redux Toolkit简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易.

从零开始搭建Redux

安装

1.创建React项目

npm create react-app my-redux-toolkit 

2.安装相关ReduxToolkit包

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

npm install redux-logger @types/redux-logger --D 

目录结构

1.在src目录上创建一个名为store的文件夹
2.在store文件夹下面创建一个文件名为index.ts作为主入口
3.在store文件夹下面创建一个名为modules的文件夹,用于存放所有的reducer文件

目录结构以及基本配置如下图所示:

注意:图中的配置将会在接下来的内中讲解.