[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简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...
随机推荐
- IIS网站部署错误总结
aspx 常见错误 CS0016: 未能写入输出文件“c:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/... ...
- JavaScript_ECMA5数组新特性
var arr = [ 1, 2, 3, 4, 5, 4, 3, 2, 1 ]; 新加位置的方法: indexOf lastIndexOf1.1个参数的时候表示传值 返回索引位置(index从0开始) ...
- 浅谈C++ 异常处理的语义和性能
异常处理是个十分深奥的主题,这里只是浅论其对C++性能的影响. 在VC++中,有多个异常处理模式,三个最重要: No exception handling (无异常处理) C++ only (C++语 ...
- jsp中button传值
onclick=location.href("linker.jsp?custno="+ from1.custno.value)或者onClick ="a()" ...
- 织梦安装过后出现"...www/include/templets/default/index.htm Not Found!"
在织梦网站搬家之后再整站更新,往往会遇到访问首页的时候出现www/include/templets/default/index.htm Not Found!,这个问题我遇到过两次,都是这样解决的: 进 ...
- COUNT()函数的使用
COUNT函数 让我们能够数出在表格中有多少笔资料被选出来.它的语法是: SELECT COUNT("栏位名") FROM "表格名" 举例来说, ...
- iOS开发网络篇—XML数据的解析
iOS开发网络篇—XML数据的解析 iOS开发网络篇—XML介绍 一.XML简单介绍 XML:全称是Extensible Markup Language,译作“可扩展标记语言” 跟JSON一样,也是 ...
- codevs4373 窗口
题目描述 Description 给你一个长度为N的数组,一个长为K的滑动的窗体从最左移至最右端,你只能见到窗口的K个数,每次窗体向右移动一位,如下表: Window position Min val ...
- CGlib使用案例
实际对象: public class RealObject { public void doSomething() { System.out.println("RealObject.doSo ...
- 谈谈依赖注入DI
控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...