Redux 实现过程的推演
/*
* 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
* @property type 描述需要做什么操作
* @property preload 预加载数据,包含 state 的新值
*/ const RESET = "RESET";
const RESET_ACTION = {
type: RESET,
preload: {
count: 0
}
};
/*
* 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({ type: "@redux/INIT" });
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 都是独立的,它们不需要知道在流程的之前或之后会发生什么。
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
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
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
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
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 状态容器
* @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);
} // ...
// 之前的代码
};
/*
* 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
};
};
};
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 实现过程的推演的更多相关文章
- 从匿名方法到 Lambda 表达式的推演过程
Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数. 以上是msdn官网对Lambda 表达式 ...
- 从下往上看--新皮层资料的读后感 第三部分 70年前的逆向推演- 从NN到ANN
第三部分 NN-ANN 70年前的逆向推演 从这部分开始,调整一下视角主要学习神经网络算法,将其与生物神经网络进行横向的比较,以窥探一二. 现在基于NN的AI应用几乎是满地都是,效果也不错,这种貌似神 ...
- Lambda 表达式推演全过程
Java 的 Lambda 表达式推演过程: 第一步:正常的类实现(外部实现),new一个对象,然后重写方法实现 public class TestLambda3 { public static vo ...
- .NET 云原生架构师训练营(ASP .NET Core 整体概念推演)--学习笔记
演化与完善整体概念 ASP .NET Core 整体概念推演 整体概念推演到具体的形式 ASP .NET Core 整体概念推演 ASP .NET Core 其实就是通过 web framework ...
- C语言 数组做函数参数退化为指针的技术推演
//数组做函数参数退化为指针的技术推演 #include<stdio.h> #include<stdlib.h> #include<string.h> //一维数组 ...
- javascript基础修炼(4)——UMD规范的代码推演
javascript基础修炼(4)--UMD规范的代码推演 1. UMD规范 地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它 ...
- 【转】- 从FM推演各深度CTR预估模型(附代码)
从FM推演各深度CTR预估模型(附代码) 2018年07月13日 15:04:34 阅读数:584 作者: 龙心尘 && 寒小阳 时间:2018年7月 出处: 龙心尘 寒小阳
- Android 进程常驻----native保活5.0以上方案推演过程以及代码
正文: 上一篇我们通过父子进程间建立双管道,来监听进程死掉,经过测试,无耗电问题,无内存消耗问题,可以在设置中force close下成功拉起,也可以在获取到root权限的360/cleanmaste ...
- Android 进程常驻----native保活5.0以下方案推演过程以及代码
正文: 今天继续昨天,一鼓作气,争取这个礼拜全部写完. 上一篇文章留了一个别人的github链接,他里面的native保活实现方案也是大多数公司采用的方案. 我们先来讲一下他的方案. 他是首先开启一个 ...
随机推荐
- css选择器的优先级算法
1. 引言 浏览器CSS匹配顺序: 浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找. 比如#divBox p span.red{color:red;}, 浏览器的查找顺序如下: 先查找ht ...
- Educational Codeforces Round 58 (Rated for Div. 2) D 树形dp + 数学
https://codeforces.com/contest/1101/problem/D 题意 一颗n个点的树,找出一条gcd>1的最长链,输出长度 题解 容易想到从自底向长转移 因为只需要g ...
- 用idea部署maven-web项目
项目部署时,需要加一步: 我们需要添加一个archetypeCatalog=internal.这个参数的意义是让这个maven项目的骨架不要到远程下载而是本地获取.如果你没加这个参数,那么项目创建可能 ...
- [转]dd命令、cp命令详解+dd命令、cp命令对比 ---delong
出处:http://blog.csdn.net/sun_app/article/details/18263299 1.dd命令详解 1)中文man手册dd的解释 NAME dd - 转换和 ...
- Jsp处理过程and数据交互
request处理客户端请求 客户端-------------->jsp页面--------------->服务器 常用方法 1.String getParameter(String na ...
- The META for Mobile terminal
近来想写一些好玩的手机网页,在这里整理了一下在手机端的meta标签,以免下次忘记,再去网上搜. meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描 ...
- python data science handbook1
import numpy as np import matplotlib.pyplot as plt import seaborn; seaborn.set() rand = np.random.Ra ...
- Spring Boot Externalized Configuration
https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-external-config.html Ex ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- Redisson碰到的问题
最近开发环境使用redisson(版本是2.8.0),在部署一段时间(半个小时左右),获取分布式锁会报超时异常(org.redisson.client.RedisTimeoutException: R ...