Redux中间件在React和React-Native项目架构中的应用实践

原创 2017年01月13日 16:12:32

这里写图片描述

前言

在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主要提供的常用接口有:

  1. provider: Provider这个模块是作为整个App的容器,在你原有的App Container的基础上再包上一层,用于传递props。

  2. 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_REQUEST, payload: data}
}

上面这个action可以通过dispatch进行分发处理到对应的reducers.

Reducer的作用

上面讲到action会定义各种操作,比如登陆,验证等等,那么接下来数据会怎么处理,进一步更新state呢?

这就要提到reducer的作用了,reducer主要处理各种数据逻辑,筛选,过滤等操作,处理完成后,会返回一个新的state,在更新到view上显示。

所以reducer的作用,在整个环节还是至关重要的。

我们看一个reducer的代码:

import { handleActions } from 'redux-actions';
import * as types from './word-constants';
import { combineReducers } from 'redux';


const getJokesList = handleActions({
        [types.SUCCESS_FETCH_DATA]: (state, action) => {
                state = action.payload;
                console.log(action.payload);
                return [...state];
        }
}, []);

export default combineReducers({getJokesList});

上面代码中,我们暂且不管handleAcions的作用,主要看state的处理,这里传递给state一个新的数据,最后通过拓展运算符…返回。

当然这只是一个例子,真实项目中可能要处理很复杂的数据结构。

applyMiddleware分析

redux在react的项目中,角色主要是数据管理,既然是数据管理,就是多少会有点中间件的意思,所以也有很多人说,redux在react项目架构中就是一个中间件的角色,这个我很赞同,因为redux真的提供了各种丰富的中间,方便我们使用,那么应用这些中间件,就需要applyMiddleware来实现了。

我们来看看:

...

const middlewares = compose(applyMiddleware(sagaMiddleware, thunk, logger), autoRehydrate());

const store = createStore(reducers, undefined, middlewares);
...

上面主要应用了三个中间件,thunk, saga, log.

下面我们会依次讲解。

常用中间件

redux的中间真的很多,但是本人没有一一尝试,对于在项目中我比较常用的,这里和大家分享一下。

react-thunk分析

这个中间件在网上会看到很多资料,说的很高大上,最开始我也云里雾里,但是究其根本,用它就一个好处: 方便在action中接收dispatch和getState两个参数,也就是我们不需要在触发action时候传递这两个参数,我们就能获取到。

主要是因为react-thunk会在异步处理中默认传过来,以便于我们在action中进一步dispatch其他的操作。

看一下代码:

/**
 * Created by Richard on 12/20/16.
 */
import { createAction } from 'redux-actions';
import { GET_CONTACTS } from './constants';
import { SAVE_DATA } from './constants';
import fetch from 'isomorphic-fetch';

export const getContacts = createAction(GET_CONTACTS);

export const saveData = createAction(SAVE_DATA);

export const getData = () => (dispatch, getState) => {
  fetch('http://offline-news-api.herokuapp.com/stories')
    .then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
    })
    .then(function(stories) {
      console.log(stories);
      dispatch(getContacts(stories));
    });
}

reselect分析

我认为这个reselect其实算不上redux的中间件,因为他不来源于redux。但是这个插件和redux配合使用,在项目中的确带来很多好处。

reselect主要用于分析处理reducer传递过来的state, 并且判断当前的state和上一个state是否为同一个,同一个即不刷新页面,在一定程度上有助于提高效率。

而且在进一步处理state的业务逻辑上, 也提供了一些action,可以方便的处理不同模块下的state关系。

看一下代码:

/**
 * Created by Richard on 1/11/17.
 */
import { createSelector } from 'reselect';

export const getAllItems = createSelector(
    [
            state => state.word.getJokesList,
    ],
    (items) => {
            return items;
    }
);

还有很多语法,需要大家自己摸索一下啦,很好用。

redux-actions分析

redux-actions这个顾名思义就是集中处理所有action的,方便使用,即简化了代码,主要会应用到action和reducer中,在action中创建,在reducer中接收。

我们看一下代码:

/**
 * Created by Richard on 12/30/16.
 */

import { createAction } from 'redux-actions';

import * as types from './word-constants';

export const successFetchData = createAction(types.SUCCESS_FETCH_DATA);

/**
 * Created by Richard on 12/29/16.
 */

import { handleActions } from 'redux-actions';
import * as types from './word-constants';
import { combineReducers } from 'redux';


const getJokesList = handleActions({
        [types.SUCCESS_FETCH_DATA]: (state, action) => {
                state = action.payload;
                console.log(action.payload);
                return [...state];
        }
}, []);

export default combineReducers({getJokesList});

代码中,我们用createAction创建一个action,以便省略了type参数,与此同时,会自动生一个一个payload参数用于传递数据到reducer中。

同样在reducer中我们可以使用handleAction接收对应的action。

redux-saga分析

对于中型项目来讲,我们需要处理很多业务逻辑,因为js没有多线程而言(排除webworker). 大多数都是异步回调处理,所以复杂的异步多少让你的代码杂乱,redux-saga主要作用在于处理各种复杂的异步操作,从而减少代码量,简化action的操作。

看一下代码:

/**
 * Created by Richard on 1/11/17.
 */
import { call, put, take, select } from 'redux-saga/effects';
import { get, getPicturesUrl } from '../../../utils/api';
import { successFetchPictureData } from './picture-list-actions';
import * as types from './picture-list-constants';

export default function* pictureFlow() {
        try {
                yield take(types.START_FETH_PICTURE);
                const data = yield call(get, getPicturesUrl());
                yield put(successFetchPictureData(data));
        } catch (e){

        }
}

对于saga的更多信息,欢迎大家阅读我写的saga应用一篇文章。

http://blog.csdn.net/jiangbo_phd/article/details/54026751

总结

单对Redux而言,每一个框架都是一个故事,都值得我们仔细品味,无论从代码简化上,还是后期维护上,都起着至关重要的作用,弄清楚每个框架的功能和作用,才能更好的在架构中加以设计。

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jiangbo_phd/article/details/53672316

React-Native_02:语法篇

1.简介 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程...
  • zhang_z_qiang
  • zhang_z_qiang
  • 2016-08-31 19:34:09
  • 8917

react-native 从简单的事件分发来介绍redux

转载请注明出处:王亟亟的大牛之路这两天组里来了几个新人,有的用过redux,有的没用过,为了让他们上手或者理解的更透彻,就写了个demo,代码逻辑来源于https://github.com/ninty...
  • ddwhan0123
  • ddwhan0123
  • 2017-05-19 21:01:19
  • 1337

【React全家桶入门之十三】Redux中间件与异步action

Redux进阶:使用Redux中间件异步触发action
  • awaw00
  • awaw00
  • 2017-02-18 16:47:52
  • 6766

react中间件的概念

一、中间件的概念 为了理解中间件,让我们站在框架作者的角度思考问题:如果要添加功能,你会在哪个环节添加? (1)Reducer:纯函数,只承担计算 State 的功能,不合适承担其他功...
  • yuanyuanispeak
  • yuanyuanispeak
  • 2017-12-19 15:13:58
  • 410

react中间件

1、中间件:就是为了解决异步数据流的问题2、applyMiddleware:是一个存在于action和reducer之间的一个操作,就是为了阻止数据直接进行修改3、自定义拦截action--&...
  • huanhuan_95
  • huanhuan_95
  • 2018-03-14 11:08:46
  • 35

Redux-Saga在React工程架构之的应用实践详解

前言React的作用View层次的前端框架,自然少不了很多中间件(Redux Middleware)做数据处理, 而redux-saga就是其中之一,目前这个中间件在网上的资料还是比较少,估计应用的不...
  • jiangbo_phd
  • jiangbo_phd
  • 2017-01-12 15:12:08
  • 15908

React Native Saga中间件概念入门

React Native的中间件Saga深入浅出第一步: 浅显的讲解,有实例,适合新手入门...
  • qq_28978893
  • qq_28978893
  • 2017-08-28 17:02:01
  • 246

react-native,react-redux和redux配合开发

react-native 的数据传递是父类传递给子类,子类通过this.props.** 读取数据,这样会造成组件多重嵌套,于是用redux可以更好的解决了数据和界面View之间的关系, 当然用到的是...
  • ling369523246
  • ling369523246
  • 2017-05-31 22:14:38
  • 2691

Redux 入门了解

Redux 入门 React Flux架构
  • vispin
  • vispin
  • 2016-11-03 19:19:48
  • 968

React Native入门基础框架

现在React Native越来越火,很多公司及个人已经慢慢开始转向这个框架,此框架号称代码复用率能达到80%左右,性能接近原生性能,关注的人也越来越多,不过成熟的App实在还没有几个,大家都在做实验...
  • shenshucong520
  • shenshucong520
  • 2016-11-24 22:01:03
  • 1364
收藏助手
不良信息举报
您举报文章:Redux中间件在React和React-Native项目架构中的应用实践
举报原因:
原因补充:

(最多只允许输入30个字)