概念
首页鸣谢黑马程序员,以此记录笔记 redux是javaScript状态容器,提供可预测化的状态管理。
Redux除了和react一块儿使用,还支持其余界面库。它体积小精悍(只有2KB,包括依赖)
java
redux 三大核心
- 1.单一数据源
- 2.State是只读的
- 3.使用纯函数类执行修改
核心理解
- 首先component中已经导入store、action。组件经过store.dispatch(action)发送一个action,一但发送action就会触发reducer,reducer经过相应的actionType执行具体逻辑,经过return返回state,并把state传给store。store通知(经过 store.subscribe(callback) 注册监听器)具体的component;subscribe回调函数里经过store.getState()就能够拿到更新后的state了
react-redux
- 缘由:在redux中,若是要发送action,必须先导入store,action,再经过dispatch发送,就会触发reducer,reducer返回state。
当组件须要获取最新state时,首先得导入store,再经过 store.subscribe(callback) 注册监听器,在subscribe回调函数里经过store.getState()就能够拿到更新后的state了。若是到真是开发中使用redux太复杂了。
于是Redux官方出了React-redux可以使你React组件从Redux store中很方便的读取数据,而且向store中分发action以此来更新数据 React这个UI框架是以组件来进行驱动的,因此react-redux中有两个重要的部分。
- Provider: 这个组件可以使你整个app都能获取到store中的数据
- 1.Provider包裹在根组件最外层,使全部子组件均可以拿到State
- 2.Provider接收store做为props,而后经过context往下传,这样react中任何组件均可以经过context获取store
- 解决了容器组件可能存在很深的层级,防止一层一层的传store,provider做用在于让组件方便拿到state,其原理运用了react中的context。
- connect: 这个方法可以使组件和store进行关联
- 1.Provider内部组件若是想要使用state中的数据,就必需要connect进行一层包裹封装,换句话说就是必需要被connect进行增强
- 2.connect就是方便咱们组件获取store中state
react-redux 简单购物车加减计算实现(思路总结)
demoreact
Provider组件实践(app.js)
- 1.导入Provider组件,在react-redux中进行导入
- 2.须要利用Provider组件,对咱们整个结构进行导入
- 3.给咱们Provider组件设置store的属性,而这个值就是咱们经过createStore构建出来的store实例对象
connect
ComA组件 加法 发送actiongit
- 1.导入connect
- 2.利用connect对组件进行增强
connect(要接受数据的函数, 要发送action的函数)(放入要增强的组件)
- 3.构建了一个函数 mapDispatchToProps(dispatch),dispatch就是用来发送action的
- 4.在这个函数里面就能够返回一个对象,key是方法名,value:调用dispatch去发送action
-
- 在组件里的内容 就能够经过 this.props来拿到这个方法
ComB组件 展现数据 接收最新state程序员
- 1.导入connect
- 2.利用connect对组件进行增强
- 3.ComB属于接受数据,就须要实现connect的第一个参数
- 4.mapStateTpProps里面的一个参数就是咱们关心的 state
- 5.把这个state进行return才能在组件的内部获取到 最新的数据
-
- ComB是否能拿到数据,关键点是 reducer
- 7.只有reducer里面返回了新的state的时候,咱们组件ComB才能获取到最新state