文档章节

Redux 实现过程的推演

o
 osc_a22drz29
发布于 2019/03/26 09:23
字数 2205
阅读 6
收藏 0

精选30+云产品,助力企业轻松上云!>>>

这是一篇浅入浅出的 Redux 实现过程的推演笔记!正常来说应该是要从源码下手开始解析,这里是逆向推演,假如有需求是要这么一个东西,那么该如何从零开始实现?

 

通过该笔记,更多的是希望自己能够多熟悉从无到有的开发思维,而非源码解析这种从有到有的轮子思维。
 
Rudex 介绍
首先确认目标,要写个什么样的东西。

官宣:A predictable state container for JavaScript apps. JavaScript 应用程序中可预测的状态容器。

通过这句话,挖掘一些关键点:
  - 1. 要有个状态:state
  - 2. 要有个(状态)容器:store
  - 3. 在状态改变的流程中,状态是可预测的,即:
    - 3.1 何时触发状态进行改变? dispatch,触发 state 的改变
    - 3.2 触发了什么改变? action,描述 state 该做什么修改
    - 3.3 状态做什么样改变? reducer,描述 state 的改变过程,传入改变前的 state,返回改变后的 state

reducer 是个纯函数很重要,能够消除其他影响让 state 的变化真正是可预测的。

有了这些关键点,接下来就是实现了
 
Redux 实现
被控对象(state)被包含在整个链路中,我们关心链路即可
 
既然是(状态)容器,那就得先有个容器,先实现个函数去创建容器,并且容器抛出方法以支持对容器内状态进行操作。
/*
 * createStore 状态容器
 * @param reducers 容器总得需要知道是做什么样的改变
 * @param initialState 初始化(预置)的 state
 */

const createStore = (reducers, initialState) => {
  // 通过 reducer 取到改变后的值,重新存储
  let currentReducer = reducers;

  // 存
  let currentState = initialState;

  // 取
  const getState = () => {
    return currentState;
  };

  // 改
  const dispatch = action => {
    currentState = currentReducer(currentState, action);
    return action;
  };

  // 这里可能还需要可被观察的,留坑、不实现,有兴趣的看文章后的源码阅读链接
  return {
    getState,
    dispatch
  };
};
至此,容器部分完成。
 
接下来看改变流程可预测的实现:
action 描述 state 该做什么修改,这仅仅是个对象而已,我们仅需要定义好格式,如下例子(比如数字的重置)
/*
 * action
 * @property type 描述需要做什么操作
 * @property preload 预加载数据,包含 state 的新值
 */

const RESET = "RESET";
const RESET_ACTION = {
  type: RESET,
  preload: {
    count: 0
  }
};

 

reducer 描述状态做了什么改变,或者说是改变的流程。
/*
 * reducer
 * @currentState 当前的 state,旧值
 * @action 该做什么修改的类型描述
 */

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case RESET: {
      return {
        ...state,
        ...action.preload
      };
    }
    default: {
      return state;
    }
  }
};
 
好了,先将上面三份代码合一起,试一试
const store = createStore(reducer);
store.dispatch({ type: RESET, preload: { count: 10 } });
store.getState(); // output { count: 10}
store.dispatch(RESET_ACTION);
store.getState(); // output { count: 0}

流程是正常了,但情况稍微有点不对,如果在 dispatch 之前去 getState,那么 state 是 {},而不是给的初始值{count:0}。对于这点,只要在 createStore 时候的默认执行一次 dispatch,用以生成初始的 state tree。
 
在 createStore 的 return 之前加入 dispatch
dispatch({ type: "@redux/INIT" });
 
ok,至此已经有个简版 redux 了(observable 和 subscribe 的话,加个 listeners,这里不多做介绍,有兴趣的点击文末链接),但是 redux 还有 middleware 的功能(而且这部分代码会比这里好玩一点),继续实现 middleware
 
Middleware 实现
首先,还是先来明确一下希望 middleware 能够帮助我们做什么?
官宣:
Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.
翻译一下:
Middleware 是通过自定义功能来扩展 redux 的推荐方法,它能够让你有效的包裹 store 的 dispatch 方法已达到所需的目的,其关键特征在于组合,多个 middleware 能够进行组合,每个 middleware 都是独立的,它们不需要知道在流程的之前或之后会发生什么。
从上面的描述中,得出结论:
  - 首先,middleware 要是个 function 且该函数对 dispatch 的执行做包裹;
  - 然后,每个 middleware 互不相干且可组合的;
  - 最后,值得注意的是 middleware 内部能够访问及操作 state,不然只能做些和 state 不相干的事情,那这个扩展的意义就不大了。
 
接下来是推演实现的过程:
 
首先,我们需要考虑的是怎么处理每个函数,让其既是独立的,又是可组合的,而且内部还得包裹 dispatch。看下面的思考过程:
 
比如我有个函数 a 和函数 dispatch 我们希望执行的过程是 dispatch 被包裹在 a 内部执行,首先想到的肯定是 callback 形式,没毛病,看代码
var a = function(next) {
  console.log("a-before");
  next();
  console.log("a-after");
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

a(dispatch);
// output:
// a-before
// do undefined
// a-after
但是没有能够把 dispatch 的参数传进去呀,于是对于内部函数的传参,不陌生的,我们又想到,外包再套一层 function,闭包存参(用 jqyery 的时候绑定事件没少这么干吧),看代码:
var a = function(next) {
  return function(action) {
    console.log("a-before");
    next(action);
    console.log("a-after");
  };
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

a(dispatch)("test action");
// output:
// a-before
// do test action
// a-after
但如果 a 的这种类型的包裹函数是多个的,试下加个函数 b,因为要嵌套的是函数,所以将 action 作为第二次执行的参数
var a = function(next) {
  return function(action) {
    console.log("a-before");
    next(action);
    console.log("a-after");
  };
};
var b = function(next) {
  return function(action) {
    console.log("b-before");
    next(action);
    console.log("b-after");
  };
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

a(b(dispatch))("test action");
// output:
// a-before
// b-before
// do test action
// b-after
// a-after
 
然后问题又来了 ,我们要再加个函数 c,难道让我写 a(b(c(dispacth)))(action)?
既然函数 a, b, c 都是一种类型的东西,可以格式化成数组,回想一下什么方法能够依次组合数组的每一项。没错,是 reduce,继续看代码:
var a = function(next) {
  return function(action) {
    console.log("a-before");
    next(action);
    console.log("a-after");
  };
};
var b = function(next) {
  return function(action) {
    console.log("b-before");
    next(action);
    console.log("c-after");
  };
};
var c = function(next) {
  return function(action) {
    console.log("c-before");
    next(action);
    console.log("c-after");
  };
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

var d = [a, b, c].reduce((pre, now) => (...args) => pre(now(...args)));

d(dispatch)("test action");
// output:
// a-before
// b-before
// c-before
// do test action
// c-after
// b-after
// a-after
 
好了,想到了如何将 middleware 串起来和如何将 dispatch 封装的方法后,集成到 redux 的代码里试试

单独抽一个 compose 函数用以处理一个或多个 middleware,代码如下:
const compose = (...funcs) => {
  if (funcs.length === 0) {
    return arg => arg;
  }

  if (funcs.length === 1) {
    return funcs[0];
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)));
};
 
修改 createStore 里的 dispatch 方法,让其支持当存在 middleware 的时候,dispatch 需要被重写。代码如下:
/*
 * createStore 状态容器
 * @param reducers 容器总得需要知道是做什么样的改变
 * @param initialState 初始化(预置)的 state
 * @param enhancer 扩展的 middlewares
 */

const createStore = (reducers, initialState, enhancer) => {
  // 参数互换 如果 initialState 是个函数,enhancer = undefined 则 enhancer 和 initialState 互换
  if (typeof initialState === "function" && typeof enhancer === "undefined") {
    enhancer = initialState;
    initialState = undefined;
  }

  // 如果有 middleware 的时候,则 createStore 稍后处理,处理详情参照 applyMiddleware 函数
  if (typeof enhancer !== "undefined" && typeof enhancer === "function") {
    // 为什么是这样写? 继续往下看
    return enhancer(createStore)(reducer, initialState);
  }

  // ...
  // 之前的代码
};
 
结合 createStore,注意到前文提出的,middleware 内部支持访问和操作 state,我们需要实现 createStore 里面的 enhancer 函数,就是函数 applyMiddleware,于是给出代码:
/*
 * applyMiddleware 实现中间件的应用
 * @param ...middlewares 插入的 state 处理流程的中间件
 */
const applyMiddleware = (...middlewares) => {
  // 传入 middlewares
  return createStore => (...args) => {
    const store = createStore(...args);
    // middleware 内部能做的 state 操作
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    };
    // 将 middleware 处理,以 middlewareAPI 作为参数执行并且取到 middleware 的内部函数
    const chain = middlewares.map(middleware => middleware(middlewareAPI));
    // 进行 compose 组合
    // 如存在 3 个 middleware A(ABefore,AAfter) B(BBefore,BAfter) C(CBefore,CAfter)
    // 则执行顺序是 ABefore - BBefore - CBefore - (真实的操作) - CAfter - BAfter - AAfter
    dispatch = compose(...chain)(store.dispatch);

    return {
      ...store,
      dispatch
    };
  };
};
 
核心实现的代码写完了,然后测试一下?(注意:测试的时候需要在 createStore 的 dispatch 里加个 "do dispatch" 的 log,方便看执行流程。)
const logger = ({ getState }) => {
  return next => action => {
    console.log("will dispatch", action);

    const returnValue = next(action);

    console.log("state after dispatch", getState());

    return returnValue;
  };
};

const store = createStore(reducer, applyMiddleware(logger));

store.dispatch(RESET_ACTION);
// output
// will dispatch {type: "RESET", preload: {…}}
// do dispatch
// state after dispatch {count: 0}
 
好了,来回顾一下实现过程,首先有个目标:做一个可预测的状态容器;然后分析目标,挖掘关键点,依次实现。实现的过程更多在于"语言运用的规范",技术知识点方面好像确实都是一些基础的运用哦。

最后,本文仅解析 redux 的实现思路,代码与源码并不完全相同。redux 不止这些代码(但其实也没多少其余代码),还有一些断言、错误提示、开发提示、bindActionCreators 啥的操作等等...
 
 
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
用原生JS从零到一实现Redux架构

前言 最近利用业余时间阅读了胡子大哈写的《React小书》,从基本的原理讲解了React,Redux等等受益颇丰。眼过千遍不如手写一遍,跟着作者的思路以及参考代码可以实现基本的Demo,下面根据自己...

osc_bnuaa5jy
2019/04/28
3
0
手把手教你 从零开始手写redux

导读 Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux 除了和 React 一起用外,还支持其它界面库。Redux 体小精悍,仅有 2KB。这里我们需要明确一点:Redux 和 React 之间,没...

问题终结者
2019/11/13
15
0
战区级联合作战仿真推演系统

  联合作战模拟推演系统是国内第一套真正具有实战意义的对抗模拟推演系统。相较于传统兵棋推演,该系统在核心引擎、推演功能柔性重组、模型架构体系设计、推演机制符合实战、规则数据开放透...

老街110号
2018/09/20
135
0
笔记----深入浅出《React和Redux》第三章Redux框架(不使用react-redux库)

二、Redux与Flux Redux的三个基本原则 A、唯一数据源(全局只有一个Store) B、保持状态只读(不能直接修改Store状态) C、数据改变只能通过纯函数完成 1、Redux与Flux不同点 (1)Store保持...

osc_80dzmuml
2019/01/02
2
0
再探Redux Middleware

前言 在初步了解Redux中间件演变过程之后,继续研究Redux如何将中间件结合。上次将中间件与redux硬结合在一起确实有些难看,现在就一起看看Redux如何加持中间件。 中间件执行过程 希望借助图...

osc_s3ds9mww
2019/01/28
1
0

没有更多内容

加载失败,请刷新页面

加载更多

038. RocketMQ 高性能最佳实践

1. 最佳实践之 Producer 1. 一个应用尽可能用一个 Topic,消息子类型用 tags 来标识,tags 可以由应用自由设置。 只有发送消息设置了 tags,消费方在订阅消息时,才可以利用 tags 在 broker...

华夏紫穹
37分钟前
24
0
QQ音乐Android客户端Web页面通用性能优化实践

QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化。本文将介绍 QQ 音乐 Android 客户端在进行 Web 页面通用性能优化过程中...

腾讯云开发者社区
56分钟前
26
0
rabbitmq+sleuth+zinkip 分布式链路追踪

我们都知道,微服务之间通过feign传递,在复杂的微服务架构系统中,几乎每一个前端请求都会形成一个复杂的分布式服务调用链路,在每条链路中任何一个依赖服务出现延迟超时或者错误都有可能引...

良许Linux
今天
16
0
5分钟搭建属于你的视频会议系统

前言 在疫情的推动下视频会议和线上办公大力发展,如果你也想了解视频会议,看看这篇文章吧 准备工作 一台Ubuntu18.04拥有公网IP的服务器 一个域名提前解析到这台服务器上 安全组设置规则tcp...

死磕音视频
今天
17
0
从文本JavaScript中删除HTML - Strip HTML from Text JavaScript

问题: 有没有一种简单的方法可以在JavaScript中获取html字符串并去除html? 解决方案: 参考一: https://stackoom.com/question/3RxM/从文本JavaScript中删除HTML 参考二: https://oldbug...

fyin1314
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部