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的更多相关文章

  1. [Redux] Implementing combineReducers() from Scratch

    The combineReducers function we used in previous post: const todoApp = combineReducers({ todos, visi ...

  2. redux创建store,处理更新数据

    如果我们想使用redux,第一步需要通过 yarn add redux 来安装redux 安装成功后就需要去创建一个store,怎么创建呢,非常的简单,在src下面创建一个文件夹,这个文件夹名字就叫做 ...

  3. 【React】Redux入门 & store体验

    组件间传值联动是令人头疼的问题,尤其是一个组件影响多个其他组件状态变化的时候,常常需要一级一级与父组件传值,与父组件的兄弟组件传值等等, 如何化繁为简地处理‘牵一发动全身’的清理就是将所有组件的sta ...

  4. Redux原理(一):Store实现分析

    写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...

  5. 如何优雅的设计Redux中的Store

    用了几个月的redux,现在回过来总结一下. 刚开始用的时候遇到一个比较大的疑问,就是如何设计redux的store中的state树,这应该是我在使用redux中最大的一个疑问,阻挡了我前进的脚步,当 ...

  6. Redux API之Store

    Store Store 就是用来维持应用所有的 state 树 的一个对象. 改变 store 内 state 的惟一途径是对它 dispatch 一个action. Store 不是类.它只是有几个 ...

  7. [转载]Redux原理(一):Store实现分析

    写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...

  8. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

  9. Redux初见

    说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...

随机推荐

  1. IIS网站部署错误总结

    aspx 常见错误 CS0016: 未能写入输出文件“c:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/... ...

  2. JavaScript_ECMA5数组新特性

    var arr = [ 1, 2, 3, 4, 5, 4, 3, 2, 1 ]; 新加位置的方法: indexOf lastIndexOf1.1个参数的时候表示传值 返回索引位置(index从0开始) ...

  3. 浅谈C++ 异常处理的语义和性能

    异常处理是个十分深奥的主题,这里只是浅论其对C++性能的影响. 在VC++中,有多个异常处理模式,三个最重要: No exception handling (无异常处理) C++ only (C++语 ...

  4. jsp中button传值

    onclick=location.href("linker.jsp?custno="+ from1.custno.value)或者onClick ="a()" ...

  5. 织梦安装过后出现"...www/include/templets/default/index.htm Not Found!"

    在织梦网站搬家之后再整站更新,往往会遇到访问首页的时候出现www/include/templets/default/index.htm Not Found!,这个问题我遇到过两次,都是这样解决的: 进 ...

  6. COUNT()函数的使用

    COUNT函数 让我们能够数出在表格中有多少笔资料被选出来.它的语法是: SELECT COUNT("栏位名")        FROM "表格名" 举例来说, ...

  7. iOS开发网络篇—XML数据的解析

     iOS开发网络篇—XML数据的解析 iOS开发网络篇—XML介绍 一.XML简单介绍 XML:全称是Extensible Markup Language,译作“可扩展标记语言” 跟JSON一样,也是 ...

  8. codevs4373 窗口

    题目描述 Description 给你一个长度为N的数组,一个长为K的滑动的窗体从最左移至最右端,你只能见到窗口的K个数,每次窗体向右移动一位,如下表: Window position Min val ...

  9. CGlib使用案例

    实际对象: public class RealObject { public void doSomething() { System.out.println("RealObject.doSo ...

  10. 谈谈依赖注入DI

    控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...