[Redux] Implementing Store from Scratch
Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic!
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
} const createStore = (reducer) => {
let state;
let listeners = []; const getState = () => state; const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
}; const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
};
}; dispatch({}); return { getState, dispatch, subscribe };
}; const store = createStore(counter); const render = () => {
document.body.innerText = store.getState();
}; store.subscribe(render);
render(); document.addEventListener('click', () => {
store.dispatch({ type: 'INCREMENT' });
});
[Redux] Implementing Store from Scratch的更多相关文章
- [Redux] Implementing combineReducers() from Scratch
The combineReducers function we used in previous post: const todoApp = combineReducers({ todos, visi ...
- redux创建store,处理更新数据
如果我们想使用redux,第一步需要通过 yarn add redux 来安装redux 安装成功后就需要去创建一个store,怎么创建呢,非常的简单,在src下面创建一个文件夹,这个文件夹名字就叫做 ...
- 【React】Redux入门 & store体验
组件间传值联动是令人头疼的问题,尤其是一个组件影响多个其他组件状态变化的时候,常常需要一级一级与父组件传值,与父组件的兄弟组件传值等等, 如何化繁为简地处理‘牵一发动全身’的清理就是将所有组件的sta ...
- Redux原理(一):Store实现分析
写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...
- 如何优雅的设计Redux中的Store
用了几个月的redux,现在回过来总结一下. 刚开始用的时候遇到一个比较大的疑问,就是如何设计redux的store中的state树,这应该是我在使用redux中最大的一个疑问,阻挡了我前进的脚步,当 ...
- Redux API之Store
Store Store 就是用来维持应用所有的 state 树 的一个对象. 改变 store 内 state 的惟一途径是对它 dispatch 一个action. Store 不是类.它只是有几个 ...
- [转载]Redux原理(一):Store实现分析
写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- Redux初见
说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...
随机推荐
- firebug js版
1.有些时候如 ie6 7 8 你觉得F12 不好用的话 你可以直接 把这两个js 引用到html 里面 <script src="https://getfirebug.com/fi ...
- 重新开始学习javase_隐藏实施过程
一.隐藏实施过程 对于隐藏实施过程,thinking in java中讲了很好,无非就是一个好的程序尽量做到,对外公开的程序,即使内部程序发生变动,也不会影响这些公开的服务的使用 类的导入java中的 ...
- 【COGS 56】质数取石子
[问题描述] DD 和 MM 正在玩取石子游戏.他们的游戏规则是这样的:桌上有若干石子,DD 先取,轮流取,每次必须取质数个.如果某一时刻某一方无法从桌上的石子中取质数个,比如说剩下 0 个或 1 个 ...
- 基于VC的串行通信技术应用实例
在工业控制中,串口是常用的计算机与外部串行设备之间的数据传输通道,由于串行通信方便易行,所以应用广泛. 本文将介绍在Windows平台下串行通信的工作机制和用Visual C++设计串行通信程序的 ...
- WireShark过滤语法
1.过 滤IP,如来源IP或者目标IP等于某个IP 例子:ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者ip.addr eq 192.168. ...
- Extjs之rowEditing编辑状态时列不对齐
Extjs在使用rowEditing的时候,会在每一列加上editor属性,表示当处于编辑状态时这一列的值是什么类型的,后突然发现在rowEditing处于编辑状态时每一列的宽度边框了,如果列数非常多 ...
- 移动H5前端性能优化指南[托尼托尼研究所]
概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2. ...
- openssl 进行证书格式的转换
各类证书由于存储的内容不同(如是否包含公钥/私钥是否加密存储/单一证书或多证书等).采用编码不同(DER/BASE64).标准不同(如PEM/PKCS),所以尽管X.509标准规定了证书内容规范,但证 ...
- 机器学习(1)之梯度下降(gradient descent)
机器学习(1)之梯度下降(gradient descent) 题记:最近零碎的时间都在学习Andrew Ng的machine learning,因此就有了这些笔记. 梯度下降是线性回归的一种(Line ...
- 【Java】基本数据类型长度
byte----1 char----2 short----2 int-----4 long------8 float---4 double----8