看过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);