前端开发中React + Redux 是大部分项目的标配，Redux也是我喜欢的库之一，他的源码也拜读过几遍，每次都有很多收获，尤其他的中间件设计模式，对自己封装一些库提供了思想上的指导。

Redux工作流程如下图：

代码实现

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<script>

  function compose(middlewares) {

    // 相当于fn1(fn2(fn3(...ages)))

    // 所以中间件是从右到左执行

    return middlewares.reduce((a, b) => (...args) => a(b(...args)));

  }

  function createStore(reducers, middlewares) {

    const currentState = {};

    let dispatch = function (action) {

      Object.keys(reducers).forEach(function (key) {

        currentState[key] = reducers[key](currentState[key], action);

      })

    }

    function getState() {

      return currentState;

    }

    if (middlewares) {

      // 通过闭包，把当前的dispatch, getState传递到中间件中

      // (action, ...args) => dispatch(action, ...args) 这里需要使用函数实时获取dispatch, 可以理解为next等价

      const chain = middlewares.map(middleware => middleware((action, ...args) => dispatch(action, ...args), getState))

      // 传递dispatch标识next

      dispatch = compose(chain)(dispatch);

    }

    dispatch({type: 'INIT'});

    return {

      dispatch,

      getState

    }

  }

  // log 中间件

  function logMiddleware(dispatch, getState) {

    return function (next) {

      return function (action) {

        console.log(`当前的age: ${getState().userInfo ? getState().userInfo.age : null}, 将要更新age为：${JSON.stringify(action)}`);

        return next(action);

      }

    }

  }

  // thunk 中间件可以异步请求

  function thunkMiddleware(dispatch, getState) {

    return function (next) {

      return function (action) {

        if (typeof action === 'function') {

          return action(dispatch, getState);

        }

        return next(action);

      }

    }

  }

  const store = createStore({

    userInfo: function (prevState = {age: 1, name: 'initName'}, action) {

      switch (action.type) {

        case 'SET':

          return {...prevState, ...action.value};

        default:

          return prevState;

      }

    }

  }, [thunkMiddleware, logMiddleware]);

  console.log('init', store.getState().userInfo.name, store.getState().userInfo.age);

  store.dispatch({type: 'SET', value: {age: 18}});

  store.dispatch(function (dispatch, getState) {

    // 模拟异步请求

    setTimeout(function () {

      dispatch({type: 'SET', value: {age: getState().userInfo.age + 1}})

    }, 2000);

  });

  console.log(store.getState().userInfo.name, store.getState().userInfo.age);

  store.dispatch({type: 'SET', value: {name: 'xiaoLi'}});

  console.log(store.getState().userInfo.name, store.getState().userInfo.age);

  setTimeout(function () {

    console.log(store.getState().userInfo.name, store.getState().userInfo.age);

  }, 2000);

</script>

</body>

</html>

Redux 原理和简单实现的更多相关文章

  1. 轻松理解Redux原理及工作流程

    轻松理解Redux原理及工作流程 Redux由Dan Abramov在2015年创建的科技术语.是受2014年Facebook的Flux架构以及函数式编程语言Elm启发.很快,Redux因其简单易学体 ...

  2. HBase笔记：对HBase原理的简单理解

    早些时候学习hadoop的技术,我一直对里面两项技术倍感困惑,一个是zookeeper,一个就是Hbase了.现在有机会专职做大数据相关的项目,终于看到了HBase实战的项目,也因此有机会搞懂Hbas ...

  3. 编译原理（简单自动词法分析器LEX）

    编译原理(简单自动词法分析器LEX)源程序下载地址:  http://files.cnblogs.com/files/hujunzheng/%E6%B1%87%E7%BC%96%E5%8E%9F%E7 ...

  4. Optaplanner规划引擎的工作原理及简单示例(2)

    开篇 在前面一篇关于规划引擎Optapalnner的文章里(Optaplanner规划引擎的工作原理及简单示例(1)),老农介绍了应用Optaplanner过程中需要掌握的一些基本概念,这些概念有且于 ...

  5. RabbitMQ系列（二）深入了解RabbitMQ工作原理及简单使用

    深入了解RabbitMQ工作原理及简单使用 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器Exchange介绍 ...

  6. 深入解读RabbitMQ工作原理及简单使用

    RabbitMQ系列目录 RabbitMQ在Ubuntu上的环境搭建 深入解读RabbitMQ工作原理及简单使用 Rabbit的几种工作模式介绍与实践 Rabbit事务与消息确认 Rabbit集群搭建 ...

  7. Java注解的基本概念和原理及其简单实用

      一.注解的基本概念和原理及其简单实用 注解(Annotation)提供了一种安全的类似注释的机制,为我们在代码中添加信息提供了一种形式化得方法,使我们可以在稍后某个时刻方便的使用这些数据(通过解析 ...

  8. C++智能指针,指针容器原理及简单实现(auto_ptr,scoped_ptr,ptr_vector).

    目录 C++智能指针,指针容器原理及简单实现(auto_ptr,scoped_ptr,ptr_vector). auto_ptr scoped_ptr ptr_vector C++智能指针,指针容器原 ...

  9. Win Socket编程原理及简单实例

    [转]http://www.cnblogs.com/tornadomeet/archive/2012/04/11/2442140.html 使用Linux Socket做了小型的分布式,如Linux ...

随机推荐

  1. LAMP架构上线动态网站WordPress

    第一步,一键安装LAMP架构所需要的程序 yum install -y httpd mariadb-server php php-mysql 第二步,配置httpd,修改主配置文件/etc/httpd ...

  2. BPF for storage：一种受外核启发的反式

    BPF for storage:一种受外核启发的反式 译自:BPF for storage: an exokernel-inspired approach BPF主要用于报文处理,通过绕过网络栈提高报 ...

  3. Day03_16_递归

    Java递归 递归包含两个部分 递归头: 标明了什么时候结束递归调用,如果没有递归头,程序将陷入死循环. 递归体: 标明了什么时候需要继续调用自身. 实例 import java.util.Scann ...

  4. Amazon EFS CSI 驱动程序 为eks 提供存储服务

    官方文档:https://docs.aws.amazon.com/zh_cn/eks/latest/userguide/efs-csi.html

  5. k8s kubernetes给node节点添加标签和删除node节点标签

    node节点IP 192.168.1.205 给节点添加标签的命令 添加label语法 kubectl label nodes <node-name> <label-key>= ...

  6. Java文档注释全攻略

    注释:注释起到对代码标注和解释的作用,如果你去看看JDK源码,会发现他们有许多的注释,而且注释是比代码还要多的,可见为代码添加注释是非常重要的,写好注释能让别人更加容易看懂你的代码,注释可以分为以下三 ...

  7. Selenium3自动化测试【15】元素定位之Class、Name

    @ 目录 1.name定位 2.class定位 1.name定位 通过name定位是另外一种常用的定位元素的方式. 当一个元素存在name属性时,可以使用name定位,依旧以Bing搜索框为例(nam ...

  8. 032- for循环语句

    问题 请在控制台里面打印10次HelloWorld. 这时可能你会这么写: System.out.println("helloworld"); System.out.println ...

  9. Android的so库注入

    作者:Fly2015 Android平台的so库的注入是有Linux平台的进程注入移植来的.由于Android系统的底层实现是基于Linux系统的源码修改而来,因此很多Linux下的应用可以移植到An ...

  10. POJ2771最大独立集元素个数

    题意:       女生和男生之间只要满足四个条件中的一个,那么两个人就不会在一起!然后给出一些男生和女生,问最多多少人一起做活动彼此不会产生暧昧关系. 思路:       这样的问题还是比较裸的问法 ...