前端开发中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. Nginx的进程管理与重载原理

    目录 进程结构图 信号量管理 Linux的信号量管理机制 利用信号量管理Nginx进程 配置文件重载原理 进程结构图 Nginx是多进程结构,多进程结构设计是为了保证Nginx的高可用高可靠,包含: ...

  2. CPF 入门教程 - 控件布局（六）

    CPF netcore跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) C ...

  3. OOP-面向对象(三)

    魔术方法的使用 # 使用 __new__ 创建单态模式 class Singleton(): __obj = None def __new__(cls, *args, **kwargs): if cl ...

  4. 中文NER的那些事儿1. Bert-Bilstm-CRF基线模型详解&代码实现

    这个系列我们来聊聊序列标注中的中文实体识别问题,第一章让我们从当前比较通用的基准模型Bert+Bilstm+CRF说起,看看这个模型已经解决了哪些问题还有哪些问题待解决.以下模型实现和评估脚本,详见 ...

  5. pwn 好的联系网站

    https://pwnable.kr/ https://w3challs.com/challenges/wargame http://overthewire.org/wargames/ http:// ...

  6. hdu1542 线段树扫描线求矩形面积的并

    题意:       给你n个正方形,求出他们的所占面积有多大,重叠的部分只能算一次. 思路:       自己的第一道线段树扫描线题目,至于扫描线,最近会写一个总结,现在就不直接在这里写了,说下我的方 ...

  7. hdu3117 斐波那契前后4位

    题意:       求斐波那契的前后4位,n <= 10^8. 思路:       至于前四位,和hdu1568的求法一样:       http://blog.csdn.net/u013761 ...

  8. Linux-鸟菜-2-主机规划与磁盘分区

    Linux-鸟菜-2-主机规划与磁盘分区 开机流程: 1. BIOS:開機主動執行的韌體,會認識第一個可開機的裝置: 2. MBR:第一個可開機裝置的第一個磁區內的主要開機記錄區塊,內含開機管理程式: ...

  9. [CTF]思维导向图

    [CTF]思维导向图 ---------------来自大佬的CTF思维导向图 Angel_Kitty https://www.cnblogs.com/ECJTUACM-873284962/ 给信息安 ...

  10. 【hugo】- hugo 博客 添加鼠标单击特效

    hugo 博客 监听鼠标点击事件,添加动画效果 js下载 链接:https://pan.baidu.com/s/1SZu76WdEXRxLCfqJ2lbbtQ 密码:r056 移入hugo博客中 打开 ...