redux react-redux 理论理解

概念

首页鸣谢黑马程序员，以此记录笔记 redux是javaScript状态容器，提供可预测化的状态管理。
Redux除了和react一起使用，还支持其他界面库。它体积小精悍（只有2KB，包括依赖）

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 简单购物车加减计算实现(思路总结)

demo

Provider组件实践（app.js）

• 1.导入Provider组件，在react-redux中进行导入
  
• 2.需要利用Provider组件，对我们整个结构进行导入
  
• 3.给我们Provider组件设置store的属性，而这个值就是我们通过createStore构建出来的store实例对象

connect

ComA组件 加法 发送action

• 1.导入connect
• 2.利用connect对组件进行加强
  connect(要接受数据的函数， 要发送action的函数)(放入要加强的组件)
• 3.构建了一个函数 mapDispatchToProps(dispatch),dispatch就是用来发送action的
• 4.在这个函数里面就可以返回一个对象，key是方法名，value：调用dispatch去发送action
• 5. 在组件里的内容 就可以通过 this.props来拿到这个方法
     

ComB组件 展示数据 接收最新state

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