React 和 Redux环境准备

配套工具介绍

在React中使用Redux，官方要求安装其它两个插件：Redux Toolkit 和 React-Redux。

Redux Toolkit

https://redux.js.org/introduction/installation

Redux Toolkit(TRK) 是官方推荐编写Redux逻辑的方式，是一套工具集，目的是简化书写方式，编写代码更加简单：

• 简化store的配置方式
• 内置immer，支持可变式状态修改
• 内置thunk，支持更好的异步创建

React-Redux

react-redux 是用来连接Redux 和 React 组件的中间件。

搭建开发环境

创建一个react项目

执行npx create-react-app react-redux-pro创建一个react项目：

安装Redux Toolkit 和 React-Redux

进到项目里边：

安装完成后，package.json文件自动更新了依赖：

启动项目

运行npm run start启动项目：

启动成功后，在浏览器可以看到信息了：

store目录结构设计

• 通常集中状态管理的部分都会单独创建一个单独的 store 目录。
• 应用通常会有很多子store模块，所以在 store 目录下面创建一个 modules 目录，在内部编写业务分类的子 store。
• store 目录下面的入口文件index.js的作用是组合modules中所有的子模块，并导出store。