浅析react中间件机制

Posted 2020-10-05

      看过react的人都知道， react是一个view层的展现库，要想实现对页面数据和路由的管理还需要配合其它的库。这其中最常用的就是redux和react-router库。

      通过redux库能够统一管理页面数据，保证数据的单向流动，其大概流程是 用户触发页面交互，页面根据用户交互产生一个action并将这个action通过store的dispatch方法传给

sotre，store根据一定关系找到reducer，reducer根据action的type类型产生新的state值并将新产生的state值回传给store，store根据最新的state通知view重新渲染页面（通过调用render函数）。而react-rouer则用来控制react中路由跳转。这样通过react redux react-router相互配合形成类似于mvc的前端页面结构。

     在上面的流程中store是数据管理的源头，但是store的数据又来自哪里呢？可以说绝大多数数据来自服务端，这里又可以分为两类数据，一类是在页面初始化的时候由服务端直接提供的数据，另一类是通过用户交互从服务端获取的数据。对于第二类数据主要是通过异步方式（ajax或者promise或者生成器或者await/async）获取的数据。今天主要记录一下自己对react和redux配合使用时如何将异步获取数据流程融合进去的理解。

    在用户操作页面得到结果的过程中主要经历了以下几个主要过程 1.用户交互产生action 2.dispatch分发action 3.reducer产生新的state值 4.storoe通知view重新渲染页面。如果要把异步获取数据的操作融合进去只有1 2两个阶段，而这两个阶段中只有在产生action之后 分发action之前是最合适的时机。要想了解这其中的运行机制，就必须了解react中间件的原理。中间件很好理解，就是一个处理过程，有输入有输出，但是中间加入了一些其它操作，类似于设计模式中的装饰模式。经过中间件的处理后，能够增加一些其它功能，比如日志记录功能，数据上报功能等等。

    我们在学习react的时候会看到很多关于如何 使用react和redux的示例代码，在创建store的时候有些是这样的：

 const store=createStore1(rootReducer,initialState);

  也有些是这样：

createStore1 = applyMiddleware(thunk)(createStore)(rootReducer,initialState);