redux理解
时间 2021-08-15
标签
React
react
redux
redux理解
1、redux是什么?
- redux是一个独立专门用于做状态管理的Js库(不是react库)
- 它可以用在react、angular、vue等项目中,但基本与react配合使用的
- 作用:集中式管理react应用中多个组件共享的状态
2、什么情况下需要使用redux?
- 某个组件的状态,需要分享
- 某个状态需要任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
3、redux的核心API
1)createStore() 创建包含指定reducer的store对象。
关于store对象
- 作用:redux库核心的管理对象
- 它内部维护着:state、reducer
- 核心方法:getState()、dispatch(action)、subscribr(listener)
2)applyMiddleware()
3)combineReducers()
4、redux 概念
- action 标识要执行行为的对象。包含两个方面的属性:type(标识属性,字符串,唯一,必要)、xxx(数据属性,任意类型,可选)
- reducer 根据老的state和action,产生新的state的纯函数
- store 将state、action与reducer联系在一起的对象:getState()得到state、dispatch(action)分发action触发reducer调用产生新的state、subscribe(listener)注册监听当产生了新的state时,自动调用
redux流程图
react-redux使用
1、理解
- 一个react插件库
- 专门用来简化react应用中使用redux
2、react-redux将所有组件分成两大类
1)ui组件
- 只负责UI的呈现,不带有任何业务逻辑
- 通过props接收数据
- 不适用任何redux的api
- 一般保存在components文件夹下
2)容器组件:
- 负责管理数据和业务逻辑,不负责UI的呈现
- 适用redux的api
- 一般保存在containers文件夹下
3、相关API
1)Provider:让所有组件都可以得到state数据
2)connect():用于包装UI组件生成容器组件
3)mapStateToprops():
注意:connect()是一个高阶函数,返回的函数是一个高阶组件(接受一个UI组件,生成一个容器组件)