数据流架构学习笔记(二)-Redux

时间  2019-11-17
标签 数据流 架构 学习 笔记 redux 栏目 系统架构 繁體版
原文   原文链接

初期参加工做开发项目时，使用React Native + Flux进行手机应用跨平台开发，在上一篇博文中数据流架构学习笔记(一)-Flux 对Flux作了一次总结，本文是我对数据流管理架构学习总结的第二篇数据流架构学习笔记(二)-Redux，是我在工做过程当中对项目使用Redux进行重构状态管理和数据流的学习记录。javascript

Redux的由来

2014年 Facebook 提出了 Flux 架构的概念和单向数据流管理的思想，并给出了管理状态的基本数据流，可是随着前端应用的复杂性指数级的提高，前端页面须要管理的状态也愈来愈多，因而出现了不少基于Flux基本的数据流概念和单向数据流思想的实现方式。2015年，Redux 出现，将 Flux 与函数式编程结合一块儿，很短期内就成为了最热门的前端架构。html

在实际项目中，你应该有遇到过如下这样状况的发生：前端

  • 在debug项目进行问题查找时，复杂的数据刷新页面时，因为一些不规范的监听和观察者机制使用或过多使用React中this.setState进行渲染页面，因为是异步进行数据渲染页面，常常没法判断本次形成是由于什么数据状态改变而形成页面渲染，并且更可恶的是此时你没法知道当前状态下，你的App实际的数据状态是如何的，就是说，你没法知道你App当前的全部数据是多少，而你一样也没法快速预测接下来你的App会如何变化。使用Redux就能够很好的解决这个问题。
  • 一样的若是你还在项目中进行模块划分，组件化开发，使用Redux能够快速将你的模块组件进行并入项目和拆分重组。

Redux工做原理

Redux 把本身标榜为一个“可预测的状态容器 ”，它充分利用函数式的特性，让整个实现更加优雅纯粹，使用起来也更简单。java

Redux(oldState) => newState复制代码

Redux 能够看做是 Flux 的一次进化。Redux遵循如下三个基本原则：react

  • 整个应用只有惟一一个可信数据源，也就是只有一个 Store
  • State 只能经过触发 Action 来更改
  • State 的更改必须写成纯函数，也就是每次更改老是返回一个新的 State，在 Redux 里这种函数称为 Reducer
View 触发数据更新 —> Actions 将数据传递到 Store —> Store 更新 state —> 更新 View。复制代码

Redux 中整个应用的状态存储在一颗 object tree 中，对应一个惟一的 Store，而且 state 是只读的，使用纯函数 reducer 来更新 state 会生成一个新的 state 而不是直接修改原来的。编程

Redux 经过以上约束让 state 的变化可预测。redux

若是没法理解这些概念，建议先学习Redux官方文档，再来查看他人的博客和使用方式，才能更快的使用。promise

Redux实例封装

这里以React Native实际项目登陆部分展现如何将Redux应用到React Native开发中进行数据管理，在实际架构项目时，每一个人有各自的编码习惯，于是，虽然一样是Redux，可是在各部分代码写法老是有所不同，而实际项目中用起来的写法也是不同的，可是思想整体上是同样的，不要拘泥于代码的写法，代码只是做为参考和总结，应该理解写法的目的思想和如何体现Redux的融入和使用。bash

视图层View

登陆页：网络

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import LoginAction from '../../actions/loginAction';
...
class Login extends Component {
    ...
    _doLogin = () => {
        const param = {
          uid: this.state.uid,
          pwd: this.state.pwd
        };

        this.props.actions.doLogin(param)
          .then(() => {
            const { navigation, login } = this.props;
            if (login.status === 'done' && navigation) {
              navigation.resetRouteTo('TabBar', { title: '首页', selectedTab: 'home' });
            } else {
              Alert.alert(
                '提示',
                login.message
              );
            }
          });
      };
    ...
}
...
const mapStateToProps = (state) => {
  return {
    login: state.loginReducer
  };
};
const mapDispatchToProps = dispatch => {
  return ({
    actions: bindActionCreators({ ...LoginAction }, dispatch)
  });
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);复制代码

简单说View层主要做用就是响应用户的操做，而实际在代码中咱们主要的做用就是触发Action，如代码中调用this.props.actions.doLogin()函数，在this.props会存在actions属性是因为在最后使用bindActionCreators方法将对应的LoginAction绑定至页面组件Login中，这样形成我在View层只会作调用action的操做，不会直接使用dispatch进行消息分发。这样就完成了View -> Actions的过程。

行为Action

const _loginSuccess = (data) => {//eslint-disable-line
  return {
    type: ActionTypes.LOGIN_SUCCESS,
    payload: {
      user: data.uid
    }
  };
};

const _loginFailed = (error) => {
  return {
    type: ActionTypes.FAIL,
    payload: {
      message: error.message
    }
  };
};

const _doLogin = (url, param) => dispatch => {
  dispatch(CommonAction.showLoading());
  return Fetcher.postQsBodyFetch(url, param)
      .then((response) => {
        dispatch(CommonAction.dismissLoading());
        dispatch(_loginSuccess(param, response));
      }).catch((error) => {
        dispatch(CommonAction.dismissLoading());
        dispatch(_loginFailed(error));
      });
};

const LoginAction = {
  doLogin: (param) => _doLogin(NetLink.login, param),
  loginSuccess: (data) => _loginSuccess(data),
  loginFailed: (error) => _loginFailed(error),
};复制代码

Action一般都是在进行网络层调用、请求数据和分发数据，因在View层使用了bindActionCreators方法和组件绑定后，将会直接获取View层组件dispatch属性方法，使得在Action的纯函数中在数据返回后调用dispatch()进行数据分发。这样就完成了Actions -> Reducer的过程。

Reducer

import ActionType from '../constants/actionType';

const initialState = {
  status: 'init',
  user: '',
  message: null
};

const loginReducer = (state = initialState, action) => {
  switch (action.type) {
    case ActionType.LOGIN_SUCCESS:
      return Object.assign({}, state, {
        status: 'done',
        user: action.payload.user,
      });
    case ActionType.FAIL:
      return Object.assign({}, state, {
        status: 'fail',
        message: action.payload.message,
      });
    default:
      return state;
  }
};复制代码

Reducer相似原来Flux的store，做为数据仓库来源，这里将会收到来自调用dipatch()后得到的消息，并进行处理和保存，并在及时更新数据后，经过redux的组件绑定，自动反馈至页面组件中进行数据更新和异步渲染，而在这里你应该return一个全新的对象，redux才能知道你是更新了当前组件关联的reducer，到了这一步你应该会产生疑问，数据状态是如何反馈至View，而你写的普普统统的Action和Reducer等js文件是如何关联上你的组件和应用。

绑定和引入

入口组件Root.js:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import Fetcher from './network/fetcher';
import Main from './containers/mainContainer';
import rootReducer from './reducers/rootReducer';

const middlewares = [thunk];
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
const createLogger = require('redux-logger');

if (process.env.NODE_ENV === 'development') {
  const logger = createLogger();
  middlewares.push(logger);
}

function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState);
  return store;
}

const store = configureStore();

export default class Root extends Component {
  constructor(props) {
    super(props);
    Fetcher.initNetworkState();
  }

  componentWillUnmount() {
    Fetcher.removeNetworkStateListener();
  }

  render() {
    return (
      <Provider store={store}> <Main {...this.props} /> </Provider> ); } }复制代码

其中rootReducer.js:

import { combineReducers } from 'redux';
import LoginReducer from './loginReducer';
...

const rootReducer = combineReducers({
  loginReducer: LoginReducer,
  ...
});

export default rootReducer;复制代码

先使用combineReducer将全部的reducer合并成一个rootReducer，使用rootReducer，在接着开始经过createStore方法建立了store对象，经过redux提供的Provider组件直接将store对象绑定至实际的View组件上，这样就完成了

View 触发数据更新 —> Actions 将数据传递到 Store —> Store 更新 state —> 更新 View。复制代码

关于其中的applyMiddleware，bindActionCreators等等方法是关于异步actions、异步数据流、Middleware的进阶知识。具体内容建议查看Redux官方文档了解相关内容。如下Redux进阶也将会大概讲解他们的使用和为何使用。

Redux进阶

使用redux-thunk和redux-logger框架，并使用applyMiddleware和Middleware来增强Redux的使用，使Redux更增强大、规范和合理。其中redux-logger框架简单理解就是添加一个Redux日志打印和处理框架，开发者无需知道他如何规范打印出Redux的dispatch日志的，可是在开发时，用于debug等是颇有用的工具。redux-thunk属于处理异步Actions和异步数据流的框架。

异步Actions和异步数据流

什么是异步Actions和异步数据流，简单来讲，就是网络请求来控制的Actions。如App中你点击一个按钮当即发出了一个dispatch(), 这是你对App控制做出的dispatch(), 这叫作同步Actions，而异步Actions并非你控制的，如网络请求成功或失败后，才会发出一个dispatch()，这就是异步Actions，你没法知道这个dispatch()是什么时间作出的操做，也不知道你发出的是成功的dispatch()或是失败的dispatch()。

如我loginAction中方法，如今应该就能很好的理解这个方法这样写的原理：

const _doLogin = (url, param) => dispatch => {
  dispatch(CommonAction.showLoading());
  return Fetcher.postQsBodyFetch(url, param)
      .then((response) => {
        dispatch(CommonAction.dismissLoading());
        dispatch(_loginSuccess(param, response));
      }).catch((error) => {
        dispatch(CommonAction.dismissLoading());
        dispatch(_loginFailed(error));
      });
};复制代码

Middleware

middleware翻译成中文意思中间件，很贴切也很容易理解，像redux-thunk 或 redux-promise就能够叫作中间件，若是你想使用这些中间件，就须要使用applyMiddleware等等相关方法为你的项目添加上这些框架。使项目使用redux更增强大和规范。

像redux-thunk 或 redux-promise 这样支持异步的 middleware 都包装了 store 的 dispatch() 方法，以此来让你 dispatch 一些除了 action 之外的其余内容，例如：函数或者 Promise。你所使用的任何 middleware 均可以以本身的方式解析你 dispatch 的任何内容，并继续传递 actions 给下一个 middleware。好比，支持 Promise 的 middleware 可以拦截 Promise，而后为每一个 Promise 异步地 dispatch 一对 begin/end actions。

当 middleware 链中的最后一个 middleware 开始 dispatch action 时，这个 action 必须是一个普通对象。这是 同步式的 Redux 数据流 开始的地方（译注：这里应该是指，你可使用任意多异步的 middleware 去作你想作的事情，可是须要使用普通对象做为最后一个被 dispatch 的 action ，来将处理流程带回同步方式）。

middleware 能够完成包括异步 API 调用在内的各类事情，了解它的演化过程是一件至关重要的事。而他们是如何演化过来的，并如何增强你的应用的，这里再也不具体说明。

总结

Redux很强大，也相对复杂。简单的项目也许并不须要使用到，可是若是你的项目愈来愈大，数据愈来愈复杂，Redux将会使你项目更加规范和健壮。在项目中使用规范的框架架构，是一件很是重要的事情，你能够为你的项目使用架构，这是一件颇有趣的事情。

文章很长，Redux也很复杂，文中若有不对请告知，我会及时改正。一块儿进步和学习。谢谢！

参考

Redux 中文文档

Redux 入门教程-阮一峰

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程