前言
在MVVM框架模式独揽天下的今天,React凭借其独特的设计思想,深入的设计理念,开辟了一条崭新的康庄大道,实属是一个重大的突破,为什么这么说呢?因为React论其设计思想,充其量只是MVVM种的V而已,对于大量而且复杂的数据来讲,自身处理上显得有些力不从心,这时候,传统的Redux和Flux的设计思想起到了决定性的作用,对于Redux和Flux这里不多赘述,这个观念在这两年被炒的异常火热,网上我们可以搜到很多的资源,最重要的是,单向数据流的观念越来越被众多的开发者应用于项目架构之中,一定程度上来讲这种设计思想,很大程度上提升了应用的性能,对此我就来谈谈我再React项目中的应用实践以及相应的观点。
react-redux分析
其实,Redux和React两个框架之间并没有绝对的联系,他们都是独立的JS框架,一个出于View层,一个用于state管理,两者之间可以相互使用,但是API融合度并不是很高,使用起来不是特别的方便,于是便有了React-redux, 借助react-redux这个库提供一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。
react-redux主要提供的常用接口有:
provider: Provider这个模块是作为整个App的容器,在你原有的App Container的基础上再包上一层,用于传递props。
connect:连接Redux和React。
Store的作用与分析
store翻译过来讲就是存储,这个模块有redux提供,而不是react-redux, 主要用于存储应用所有的state。类似于一个大的临时存储数据库。
创建代码也很简单:
....
import { applyMiddleware, createStore, compose } from 'redux';
....
const store = createStore(reducers, undefined, middlewares);
.....
.....
Action的作用分析
action顾名思义就是各种操作,对于redux来讲,view的每一种处理都会对应一种操作,每个action的定义也很简单,主要变量是一个type,定义了当前action是处理什么的。
view ==> dispatch ===> action
通常,也有开发者会在action中访问请求数据,比如http数据请求等等。
看下代码:
const loginAction = (data) => {
return {
type: LOGIN_REQUE