redux与react-redux
1.redux 理解
1.1.redux 是什么
- redux是一个专门用于做状态管理的JS库(不是react插件库)。
- 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
- 作用: 集中式管理react应用中多个组件共享的状态。
1.2. 什么情况下需要使用redux
- 某个组件的状态,需要让其他组件可以随时拿到(共享)。
- 一个组件需要改变另一个组件的状态(通信)。
- 总体原则:能不用就不用, 如果不用比较吃力才考虑使用。
1.3. redux工作流程
- Components 告诉 Action Creators 要执行的动作, Action Creators 可以有多个,它会创建一个动作对象 action,包含要执行的动作类型和动作数据,交由 dispatch 进行分发,dispatch会交给store,store 相当于一个管理者,管理各个部分,store 将 action 和 previousState 传递给 Reducers ,Reducers 加工状态执行要操作的动作对象,返回一个新的 state ,交还给 store,组件可以通过 getState() 方法得到 redux 管理的状态.
2. redux的三个核心概念
2.1. action
- 动作的对象:创建 Action ,表示一个动作对象,将 action 交由 dispatch 方法,一个函数返回 Action 的方法
- 包含2个属性
- type:标识属性, 值为字符串, 唯一, 必要属性(初始化的时候为@@init@@)
- data:数据属性, 值类型任意, 可选属性(初始化时不传该属性)
- 例子:{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
2.2. reducer
1.用于初始化状态(只执行一次)、加工状态。 2.加工时,根据旧的state(初始化时为 undefined)和action, 产生新的state的纯函数。
2.3. store
1.将state、action、reducer联系在一起的对象
2.如何得到此对象?
- 1)import {createStore} from 'redux'
- 2)import reducer from './reducers'
- 3)const store = createStore(reducer)
3.此对象的功能?
- 1)getState(): 得到state
- 2)dispatch(action): 分发action, 触发reducer调用, 产生新的state
- 3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
3.react-redux
3.1 容器组件:
3.1.1 作用:
利用react-redux 创建 ,是一个桥梁用于链接UI组件和Redux(store),使用connect()()创建并暴露一个Count的容器组件,在UI组件中就可以用 props 接收状态;并且不需要再检测组件处是否重新渲染,connect 会根据状态的改变,自动渲染组件
3.1.2 connect 方法:
connect(mapStateToProps,mapDispatchToProps)(CountUI)):
mapStateToprops 方法用于映射状态;
1.mapStateToProps函数返回的是一个对象;
2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapStateToProps用于传递状态
mapDispatchToProps 方法用于映射操作状态的方法
1.mapDispatchToProps函数返回的是一个对象;
2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value3.mapDispatchToProps用于传递操作状态的方法
3.2 react-redux基本使用
(1).明确两个概念:
1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
2).容器组件:负责和redux通信,将结果交给UI组件。
(2).如何创建一个容器组件————靠react-redux 的 connect函数
connect(mapStateToProps,mapDispatchToProps)(UI组件)
-mapStateToProps:映射状态,返回值是一个对象
-mapDispatchToProps:映射操作状态的方法,返回值是一个对象
(3).备注1:容器组件中的store是靠props传进去的,而不是在容器组件中直接引入
(4).备注2:mapDispatchToProps,也可以是一个对象(简写方式只需要写 action 即可,react-redux 会帮助我们调用 dispatch 分发,例: increase: createIncrementAction)
3.3 _react-redux优化
(1).容器组件和UI组件整合一个文件(2).无需自己给容器组件传递store,给<App/>包裹一个<Provider store={store}>即可。(3).使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作。(4).mapDispatchToProps也可以简单的写成一个对象(5).一个组件要和redux“打交道”要经过哪几步? (1).定义好UI组件---不暴露 (2).引入connect生成一个容器组件,并暴露,写法如下: connect( state => ({key:value}), //映射状态 {key:xxxxxAction} //映射操作状态的方法 )(UI组件) (4).在UI组件中通过this.props.xxxxxxx读取和操作状态
3.4 react-redux数据共享版
(1).定义一个Pserson组件,和Count组件通过redux共享数据。 (2).为Person组件编写:reducer、action,配置constant常量。 (3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并,合并后的总状态是一个对象!!! (4).交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”。
3.5 react-redux开发者工具的使用
(1).yarn add redux-devtools-extension
(2).store中进行配置
import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
3.6 react-redux最终版
(1).所有变量名字要规范,尽量触发对象的简写形式。(2).reducers文件夹中,编写index.js专门用于汇总并暴露所有的reducer
redux与react-redux相关推荐
- React+Redux系列教程
2019独角兽企业重金招聘Python工程师标准>>> 参考项目:https://github.com/lewis617/react-redux-tutorial 参考项目下载地址: ...
- React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程(97 个视频)
React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程(97 个视频) mern 架构零基础开发完整电商网站 React + Redux + Expre ...
- React+Redux开发实录(一)搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览 搭建工程脚手架 准备工作 安装node 安装git 安装一款前端IDE 推荐VSCode, ...
- 基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
- react开发教程(十)redux结合react
描述 Redux 和 React 之间没有关系.Redux 可以搭配 React.Angular 甚至纯 JS.但是 Redux 还是比较适合和 React 搭配的,因为 React 允许你以 sta ...
- React Redux 的一些基本知识点
一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...
- 【视频】React redux toolkit创建状态切片
React redux toolkit创建状态切片
- react实战项目_React实战之React+Redux实现一个天气预报小项目
引言 经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
- React+Redux仿Web追书神器
引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
- react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...
最新文章
- 4 三元表达式 列表解析 生成器表达式
- Web Service (二) CXF自动发布Web Service(No Spring)
- iOS设计模式四部曲(三):行为型模式 内附Demo
- Apache+PHP+MySQL安装与配置
- python里类的概念
- 快速上手系列:传智播客Java基础笔记
- 996.ICU凉凉了!
- 基于java web的学生考勤带请假管理系统——计算机毕业设计
- matlab 自动交易系统设计3
- 开箱即用的SSH攻击字典收集工具
- Dynamics 365Online 模板(Template)可以下载了
- 【边缘计算】移动边缘计算中延迟和能量约束任务卸载的最优拍卖
- 【A阶段A+2】-vinc- =-vict- 胜,征服,扩展的单词学会了?
- TypeError: Object of type xxx is not JSON serializable错误解决
- 知识图谱 Freebase 的基本概念
- 【Halcon视觉】中心线提取
- dos格式和linux文本文件,怎么判断是Windows-dos文本文件还是Linux-Unix文本文件?
- 饥荒联机版Centos下自动更新教程
- 客户端 cloudera-scm-agent启动报错
- 深入MTK平台bootloader启动之【 Pre-loader -> Lk】分析笔记