笔记----深刻浅出《React和Redux》第三章Redux框架 (使用React-Redux库)

在直接使用React-Redux库以前，须要作一个铺垫

 

3、容器组件(也叫Smart Component)和展现组件(也叫Dumb Component)

一、用处：这个知识点主要创建在上一章基础上，在上一章中Redux和React进行配合，单个组件处理的任务太多，为了“让每一个组件专作一件事”，把组件按处理的任务类型进行拆分，分红容器组件和展现组件，如下是他们的分工

 

       展现组件：接受props，并渲染出来

       容器组件：和Store打交道，处理State

 

 

二、容器组件和展现组件是父子级组件关系，容器组件在外层，展现组件在内层

 

         　　

 　　　　

　　　　　　展现组件就是一个纯函数，根据容器组件传递过来的props进行渲染

 

 三、代码实践  (修改Counter.js文件)

 

　　这次把以前的Counter组件，按功能分红两个组件，一个是Couter，做为展现组件，另外一个是CounterContainer，做为容器组件

 　　

　　 Counter

　　 

 

　　CounterContainer

　　

 　  

　　

 　  在这里CounterContainer（外层的容器组件）负责和Store进行交互，并将从Store中获取到的状态，经过props传递给Counter（内层的展现组件），而后展现组件将拿到的props值进行渲染，而后在结果一层层的提交出来。在整体看来，和以前的效果同样，可是分工更加细致了

 

      另外，React 支持用函数来表示无状态组件，展现组件Couter也能够写成，结果同样生效

　　

 

　　最后结果： 

　　　　　 

 

 

 

 

4、组件Context

 一、用处：提供全局的store，不用考虑store文件在哪一个位置，而避免react组件引入store带来的麻烦，

          实现方式就是把这个store塞进组件的context属性中，这样子每一个组件都能直接访问到store的状态值了

 

　　　 

 二、在根组件中，将store放入context，以后其余全部子组件就能够经过this.context.store访问到context中store，从而避免了屡次引入store带来的麻烦

                        

 

三、代码实现

 

书中是按context旧版本使用方式，新版使用方式虽然略有不一样，可是总体思路仍是差很少

 

　　在主入口文件中App.js

　　

　　说明：为了避免是ControlPanel组件工做变得复杂，在此另写一个根组件Provider，并将store引入，做为Provider组件的属性值

 

 

　　Provider.js 　 

 　  

　　关键的步骤来了，这一步是将store塞进context中，方便以后的子孙组件们轻松调用。

　　

　　注意注意！！！！！

　　（i）这里使用到了须要借助一个函数getChildContext()，他会返回一个context对象，咱们须要把store放在这里面

　　（ii）在这里还须要用childContextTypes指定context的结构类型，如不指定，会产生错误

 

 

　此时若是将指定类型注释了

　

　　

     能够看出getChildContext和childContextTypes搭配使用

 

  

 

　　ControlPanel.js

　　 

　　这个保持不变

 

 

 　  Counter.js

　　

　　

　　这个组件做为PropTypes子组件，能够从context拿去store，而不须要像以前同样，在当前组件中引入store文件以后才能够访问子组件

　　

 

　　注意注意！！！！！

　　在须要调用store的组件中，首先在constructor和super中加入参数context，进行初始化

 　  而后使用contextTypes指定的store结构类型，记住，若是contextTypes没有被定义，context只是一个空对象

 

　为了在控制台看一下效果，咱们打印当前组件进行观察

　

 

　对比注释先后的变化

　  

  　

 

 

   

   

 　　最后能够经过this.context.store进行访问了

 

 

 　　总结：旧版本使用须要

　　　　　  根组件：

                      getChildContext()放入须要共享的数据

                      childContextTypes指定context中数据的数据类型

                 子组件：

                      contextTypes指定须要接受的context中哪一部分的数据类型

 

 

5、react-redux

 　　以前三和四的“容器/展现组件”以及“访问store方式”，实现“react-redux”库中最主要的两个功能：

　　（1）connect：链接容器组件和展现组件；

　　（2）Provider：提供了包含store的context

 

　　一、使用react-redux以后的代码

 

　　Summary.js

　　

　　由于展现组件不涉及状态，在这里我以函数形式进行书写，能够对比下面的Summary展现组件以类的形式书写

 

　　Counter.js

　　

　　 

 

　　App.js入口文件

　 　 　　

 

 　　其余代码照旧

 

　　（1）connect：

 

　　　　　　connect(mapStateToProps，mapDispatchToProps)(Counter)

 　　　　　　

这个方法接受两个参数mapStateToProps和mapDispatchToProps，执行结果仍然是一个函数，因此以后继续加了一个小括号，其中小括号里放了展现组件，通过这两个执行后产生容器组件

　　　　　　

mapStateToProps和mapDispatchToProps是两个函数，mapStateToProps负责将Store上状态转化为内层组件的props，mapDispatchToProps负责将动做进行派发

　　　　　　

 

　　（2）Provider

 

react-redux中封装了相似咱们以前写的Provider类，可是里面更加严谨，好比不只要求store是一个object，还要求store是一个包含subscribe，dispatch，getState函数的store

 

 

 

 

 

部分参考

https://reactjs.org/docs/legacy-context.html