探讨Redux技术

今天继续学习React相关知识，首先探讨下Redux技术。

提出问题

在说问题之前，我们先聊一聊React的组件通讯机制。

首先要说明下，React是单页面应用(SPA)。即整个App就一个index.html文件并且是App的入口。这点类似C/C++ 或者Object-C的main函数。

既然是SPA。那么各个界面都是通过不同的组件(Component)组合而成。所以我们可以看到React项目有很多功能不同、样式各异的组件。那问题来了，组件与组件间怎么通讯的呢？(这里要说明下，这里说的组件是指类组件，而非函数组件.)

React框架给我们一种通用的组件通讯方式:props

我们分场景说明

场景1:A组件与B或C组件通讯

A通过props 直接把数据传给B或者C组件，如下图所示。因为props是React框架实现的，就很容易实现父子组件间通讯。

 

场景2:D组件与B组件通讯

• 因为B组件不与D组件构成父子关系。那么D不能直接使用props进行通讯;

• D与A组件也不是父子关系，也不能直接通讯;

• D与B组件共同的父节点就是App组件;

所以，D组件要与B组件通讯，只能是D把数据传给App父组件，再由App组件向子组件A传数据，再由A组件向B组件传数据。这样一层层的父子传递数据。如下图

注意：

1.图中的D组件与App组件不能通过props通讯，所以划的是虚线，因为他们是子传数据给父组件，不能使用props。只能先再App组件上传一个函数给D组件，让D组件在需要传数据的时候调用传入的函数。类似回调函数。

2.App组件到B组件需要一层层的传递数据。不能直接从App到B组件。

通过上面的描述，React的类组件通讯就有一个很麻烦的问题：

1.兄弟组件不能直接通讯，只能通过共同的父组件转接。

2.祖组件与孙组件也不能直接通讯，要一层层的数据传递。

针对上述问题，Redux就是解决方案。

Redux概述

Redux是一个提供状态管理的第三方开源库，非facebook厂家出品。

中文官网:https://cn.redux.js.org/.

英文：https://redux.js.org/

Redux组件间通讯的基本思想：

建立一个额外的公共区域，这个区域所有组件都能访问到。只要共享组件把要共享的数据放到Redux中；需要使用数据的组件到Redux中获取即可。如下图所示

通过Redux方式，就可以使任何组件在任何位置都可以通讯了。

Redux详细实现

上面的图只是简单的概述Redux的通讯机制。详细的实现方式还是很复杂的，我们一起看下。

 上图详细的讲述了Redux内部实现机制。很复杂的吧！我们详细聊一聊。

上图牵涉到4个角色：component、action、store和reducer。

可以把这四个角色对应到我们生活中实际场景----去饭店吃饭。

component就是顾客，主要功能就是去饭店吃饭；

action相当于服务员，主要是帮顾客订餐；

store就是总大厨，也可以是老板，负责饭店整体事务；

reducer就是实际炒菜的师傅；

Redux的实际流程模仿到此场景就是：componentA顾客来到饭店，向action服务员订了一个菜；然后action把菜传给了store老板，当然这里的传法是dispatch方式，参数是操作类型和实际数据；store老板再向reducer大厨下命令---炒顾客订的菜；当reducer大厨炒好菜之后，再把菜回传给store；再由store叫componentA自己来端菜(获取数据)，实现顾客吃饭的整个流程。

这里有几个注意点：

1. store是全局且唯一的；

2. action向store老板通讯是通过dispatch方式，其中携带来是一个对象，里面有类型(type)和数据(data)两个值；

3. reducer做具体事情，也只听store老板的命令，其他人是不能下命令给他的。

以上就是Redux的入门级技术探考，让大家有个基本的印象。本来是想写个Demo出来，但是Demo要花一些时间，等以后写好了再补充。