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. Android开源项目 Universal imageloader 源码研究之项目框架

    Universal imageloader 的代码并不复杂 重点是缓存,线程池任务 下面都用UML图进行了绘制 基本使用流程就是 初始化配置,设置Options参数,最后Dispaly提交下载 pub ...

  2. tomcat报404

    很久没有用eclipse了,尝试了使用下,竟然将简单的配置tomcat都忘了. 自己新建一个工程,在tomcat发布以后,报404,经查Serves下的web.xml中,欢迎页面是index.jsp, ...

  3. 安卓开发入门之activity

    安卓开发主要用到的是java语言,对于一个activity,自己写的程序可以继承至Activity,该Activity先会运行一个叫 onCreat()的类,可以在其中申明一些初始化的函数等,这个函数 ...

  4. 利用iframe实现提交表单是页面部分刷新

    直接上代码: <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  5. 对于HttpContext.Current的一点理解

    string[] userInfomationSplits = HttpContext.Current.User.Identity.Name.Split(new string[] { "\\ ...

  6. JavaScript设计模式之命令模式

    一.命令模式概念 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用.请求和操作封装成一个单一的对 ...

  7. js学习笔记之:时间(一)

    日期和时间是javaScript中常用的对象,可以通过此对象判断星期.生日.纪念日等,提高网站的人性化.下面将通过实例来介绍一下学习javaScript中有关时间和日期的知识点: (1)日期和时间函数 ...

  8. javascript 弹框提示选择

    <script type="text/javascript"> window.onload = function () { document.getElementByI ...

  9. Dapper inner join

    Dapper中的一些复杂操作和inner join应该注意的坑 上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相 ...

  10. 防止SQL注入攻击,数据库操作类

    如果不规避,在黑窗口里面输入内容时利用拼接语句可以对数据进行攻击 如:输入Code值 p001' union select * from Info where '1'='1 //这样可以查询到所有数据 ...