07react18-Redux(上篇)

Redux

Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行
作用：通过集中管理的方式管理应用的状态
为什么要使用Redux？

1. 独立于组件，无视组件之间的层级关系，简化通信问题
2. 单项数据流清晰，易于定位bug
3. 调试工具配套良好，方便调试

Redux与React - 环境准备

Redux虽然是一个框架无关可以独立运行的插件，但是社区通常还是把它与React绑定在一起使用，以一个计数器案例体验一下Redux + React 的基础使用

1. 配套工具

在React中使用redux，官方要求安装俩个其他插件 - Redux Toolkit 和 react-redux

1. Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
2. react-redux - 用来 链接 Redux 和 React组件 的中间件

2. 配置基础环境

1. 使用 CRA 快速创建 React 项目

npx create-react-app react-redux 

2. 安装配套工具

npm i @reduxjs/toolkit  react-redux 

3.启动项目

npm run start 

3. store目录结构设计

image.png

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