什么是Redux？
Redux是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行
作用：通过集中管理的方式管理应用的状态
例子：不和任何框架绑定，不使用任何构建工具，使用纯Redux实现计数器
使用步骤：
1.定义一个reducer函数（根据当前想要做的修改返回一个新的状态）
2.使用createStore方法传入reducer函数生成一个store实例对象
3.使用store实例的subscribe方法订阅数据的变化（数据一旦变化，可以得到通知）
4.使用store实例的dispatch方法提交action对象触发数据变化（告诉reducer你想怎么改数据）
5.使用store实例的getState方法获取最新的状态数据更新到视图中
<!doctype html>
<html><head><meta charset="utf-8"><title>redux</title>
</head><body><button id="decrement">-</button><span id="count">0</span><button id="increment">+</button><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.1.1/redux.min.js"></script><script>//1.定义reducer函数//作用：根据不同的action对象，返回不同的新的state//state：管理的数据初始状态//action：对象type标记当前想要做什么样的修改function reducer(state={count:0},action){//数据不可变：基于原始状态生成一个新的状态if(action.type==='INCREMENT'){return{count:state.count+1}}if(action.type==='DECREMENT'){return {count:state.count-1}}return state}//2.使用reducer函数生成store实例const store=Redux.createStore(reducer)//3.通过store实例的subscribe订阅数据变化store.subscribe(()=>{console.log('state变化了',store.getState())document.getElementById('count').innerText=store.getState().count})//4.通过store实例的dispatch函数提交action更改状态const inBtn=document.getElementById('increment')inBtn.addEventListener('click',()=>{//增store.dispatch({type:'INCREMENT'})})const dBtn=document.getElementById('decrement')dBtn.addEventListener('click',()=>{//减store.dispatch({type:'DECREMENT'})})//5.通过store实例的getState方法获取最新状态更新到视图中</script>
</body></html>Redux管理数据流程梳理
为了职责清晰，数据流向明确，Redux把整个数据修改的流程分成了三个核心概念，分别是：state、action和reducer
1.state-一个对象存放着我们管理的数据状态
2.action-一个对象用来描述你想怎么改数据
3.reducer-一个函数更具action的描述生成一个新的state
环境准备
配套工具
在React中使用redux，官方要求安装俩个其他插件-Redux Toolkit和react-redux
1.Redux Toolkit（RTK）：官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
2.react-redux： 用来链接Redux和React组件的中间件
配置基础环境
1.使用CRA快速创建React项目
npx create-react-app 项目名称
2.安装配套工具
进入新创建的项目里
cd 项目名然后安装
npm i @reduxjs/toolkit 项目名
3.启动项目
npm run start
store目录结构设计
1.通常集中状态管理的部分都会单独创建一个单独的’store‘目录
2.应用通常会有很多个子store模块，所以创建一个’modules‘目录，在内部编写业务分类的子store
3.store中的入口文件index.js的作用是组合modules中所有的子模块，并导出store
![[Qt的学习日常]--常用控件3](https://img-blog.csdnimg.cn/direct/ea9bc34104da484dbfc5cc28f22be9db.png)
