redux react-redux 理论理解

概念

首页鸣谢黑马程序员,以此记录笔记 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
    1. 在组件里的内容 就能够经过 this.props来拿到这个方法

ComB组件 展现数据 接收最新state程序员

  • 1.导入connect
  • 2.利用connect对组件进行增强
  • 3.ComB属于接受数据,就须要实现connect的第一个参数
  • 4.mapStateTpProps里面的一个参数就是咱们关心的 state
  • 5.把这个state进行return才能在组件的内部获取到 最新的数据
    1. ComB是否能拿到数据,关键点是 reducer
  • 7.只有reducer里面返回了新的state的时候,咱们组件ComB才能获取到最新state
相关文章
相关标签/搜索