前端开发中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. Java面向对象7大设计原则

    目录 单一职责原则 SRP 开闭原则 OCP 里氏替换原则 LSP 依赖倒置原则 DIP 接口隔离原则 ISP 组合复用原则 CRP 迪米特法则 LOD 单一职责原则 SRP 一个类只有一个引起修改变 ...

  2. k8s 创建私有docker仓库 登陆授权令牌的Secret

    参考https://kubernetes.io/zh/docs/tasks/configure-pod-container/pull-image-private-registry/ Kubernete ...

  3. mongodb数据修复宝典

    mongodb数据修复宝典 1. 版本信息 mongodb版本: 3.6.14 2.mongodb日志内容: 2019-10-04T10:41:38.558+0000 E STORAGE [inita ...

  4. 1025 PAT Ranking

    Programming Ability Test (PAT) is organized by the College of Computer Science and Technology of Zhe ...

  5. jmeter响应时间与postman响应时间为什么不一样？

    postman响应时间 是一个线程或者一个用户再者说是发送一次请求的响应时间,一般都是200ms一下: 而jmeter属于并行,就是多个用户去访问这个功能点或者接口,多个用户同时访问,就会造成压力,自 ...

  6. hdu1316 大数

    题意:      给你一个区间,问这个区间有多少个斐波那契数. 思路:      水的大数,可以直接模拟,要是懒可以用JAVA,我模拟的,打表打到1000个就足够用了... #include<s ...

  7. 手脱ASPack2.12壳（练习）

    俗话说柿子挑软的捏,练习脱壳还得用加密壳脱 0x01 准备 1.OD 2.ASPack加壳软件 0x02 脱壳实战 查一下壳 OD载入 第一个call,F7进去 第二个call也是F7进去 之后往下单 ...

  8. CVE-2013-1347：从入门到放弃之调试分析令人崩溃的 Microsoft IE CGenericElement UAF 漏洞

    0x01 2013 年 "水坑" APT 攻击事件 在 2013 年 5 月,美国的劳工部网站被黑,利用的正是 CVE-2013-1347 这个漏洞,在当时导致大量使用 IE8 访 ...

  9. Win64 驱动内核编程-1.环境搭建

    驱动开发环境及其双机调试环境搭建 开发环境搭建 使用工具:vs2015,Windows 10 SDK_10.0.14393,WDK10.0.14393.0 (1)安装VS2015  随便一个版本吧,我 ...

  10. 通过例子分析MVVM

    通过一个简单的计数器例子分析MVVM. 代码 demo2.html <!DOCTYPE html> <html lang="en"> <head> ...