React+Redux 入门学习总结

最近几天学习React + Redux，还有Redux异步。

React比较简单，它只是负责界面渲染而已，就如同Vue或者Angular一样。官网有初始项目工具：create-react-app 。直接按照ReadMe就可以建立空项目进行React练习。

React是单向数据流，从父组件传递到子组件，一般用props传递。每个组件的props不能更改，只能由父组件进行传值更改，所以称为单向数据流。每个组件有自己内部状态，使用state属性进行存储，组件可以自己维护更改state的属性状态值。

如此，产生一个问题，很多情况下，子组件可能有鼠标或者键盘操作需要触发事件更改父组件的关联展示，或者触发兄弟组件的关联展示。这样就比较麻烦。解决方案就是父组件传递子组件的props中写回调函数，而回调函数的实现是在父组件中，所以回调函数可以更改父组件的state数据，并更改传递给子组件的props展示计算数据。从而实现子组件更改父组件。

如果只有一个子组件和父组件，比较容易解决。而如果中间隔了好几个组件，不是父子关系的组件，就要回调一层套一层。再比如兄弟组件中间相互关联影响，就要以共同的顶级的父节点进行传输数据中介。十分麻烦。原理犹如DOM中的点击事件的冒泡和捕获一样，从下往上，再从上往下。

自己可以写一个共享全局对象，然后每个组件的数据state都是来取自它。但是需要自己维护整个全局对象，而且还需要监听数据变化来及时渲染，非常有挑战。

由此需要引入Redux，它实现了一个数据大对象，供所有网站使用。

Redux由三个部分组成：Action，Reducer，Store。 Store存储所有数据。Reducer专门直接处理Store数据并更新它。Action则是供网站组件调用通知指定的reducer执行，而不直接操作Store数据。因此Action一般和Reducer一一对应，采用相同标识type进行寻找，Action中顺便带过去计算变量数据给reducer进行处理。

Redux中的Reducer比较难于理解，创建Store时，Reducer传递的是函数给Store，比较容易造成误解，其实函数名就是Store里面你指定的数据标识，比如 Store 中 的一个数据对象叫 items 用来存储所有订单数据条数，而要处理items的变化，Reducer的暴露的函数名就叫做items了，里面包含所有要处理items的Action的种类，所以一般是switch来判断。

Redux学完后，如何与React一起应用是个问题，Redux其实只是负责数据处理，不局限于应用到React，也可以应用到其它的渲染框架。

引入react-redux中间件帮助解决问题。它的一个频繁使用函数是connect，函数是两个可选参数，结果返回一个函数，需要调用并传入React组件。比如React组件A，原本是export default A。就改成 export default connect(param1,param2)(A)。参数param1是一个函数，connect会传递整个Store数据作为param1函数的参数，在函数param1中进行Store数据的获取，并在结束时返回数据对象，connect自动把返回的对象的数据赋值到组件A的props，A组件就可以使用Store返回的数据了，而且Store每次更改数据，param1函数就会执行一下。参数param2是个对象，或者传入函数返回对象，对象中的数据是Redux中定义的Action，connect会将对象中的Action赋值到A的props中，供A直接调用，从而Reducer可以接收Action并处理更新数据。

至此将近尾声，还留下Redux中Reducer处理数据时，如果需要ajax请求或者异步需要解决一下。因为Reducer数据处理只有同步。所以引入redux-thunk中间件，在Reducer处理异步数据时，多一层高阶函数回调一下就可以了。

学完这些，该去写写组件库，看看各类例子项目熟悉。因为React是纯函数式编程，写法因人而异，es语法太飘逸。

 

欢迎关注公众号，获取更多资料。