前端开发中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. 【笔记】《Redis设计与实现》chapter10 RDB持久化

    chapter10 RDB持久化 10.1 RDB文件的创建和载入 有两个Redis命令可以用于生成RDB文件,SAVE和BGSAVE SAVE阻塞服务器进程进行RDB文件的创建,BGSAVE则创建服 ...

  2. Day01_05_Java第一个程序 HelloWorld - java类规则

    第一个程序Hello World *基础语法规则: 1. 第一个Java程序 HelloWorld! public class HelloWorld{ public static void main( ...

  3. Day14_78_可变长参数

    可变长参数 可变长参数只能在形参列表的最后一个,且只能出现一次. 代码实例 import java.util.Date; public class 可变长参数 { public static void ...

  4. Java整合极光推送 ( 简单 )

    Java 整合极光推送官方文档:https://github.com/jpush/jpush-api-java-client 这里记录一下简单的使用步骤:创建一个普通的 Maven 工程然后添加依赖 ...

  5. 1055 The World's Richest

    Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...

  6. wordpress current_user_can 判断角色

    current_user_can 使用说明: current_user_can( $capability, $args ); $capability参数是必须的,是指给予什么样的能力,或者说给他可以做 ...

  7. Python的套接字、IPv4和简单的客户端/服务器编程

    #!/usr/bin/env python # -*- coding: utf-8 -*- import socket from binascii import hexlify import sys ...

  8. POJ2391 Floyd+离散化+二分+DINIC

    题意:       有n个猪圈,每个猪圈里面都有一定数量的猪(可能大于当前猪圈的数量),每个猪圈都有自己的容量,猪圈与猪圈之间给出了距离,然后突然下雨了,问多久之后所有的猪都能进圈. 思路:     ...

  9. React-组合模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  10. mongodb 在PHP中常见问题及解决方法

    1.$in needs an array 解决:查询用到in操作的时候,说in操作对应的不是我一个数组,或者数组索引不是以0开始的 方法:array_values重新生成一个索引为0开始的数组即可 $ ...