此示例不需要构建系统或视图框架，并且存在以显示与ES5一起使用的原始Redux API。



代码如下

<!DOCTYPE html>

<html>

  <head>

    <title>Redux basic example</title>

    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>

  </head>

  <body>

    <div>

      <p>

        Clicked: <span id="value">0</span> times

        <button id="increment">+</button>

        <button id="decrement">-</button>

        <button id="incrementIfOdd">Increment if odd</button>

        <button id="incrementAsync">Increment async</button>

      </p>

    </div>

    <script>

      function counter(state, action) {

        if (typeof state === 'undefined') {

          return 0

        }

		//将action和state联系起来的reducer

        switch (action.type) {

          case 'INCREMENT':

            return state + 1

          case 'DECREMENT':

            return state - 1

          default:

            return state

        }

      }

	//store存储数据

      var store = Redux.createStore(counter)

      var valueEl = document.getElementById('value')

      function render() {

        valueEl.innerHTML = store.getState().toString()

      }

      render()

      store.subscribe(render)

      document.getElementById('increment')

        .addEventListener('click', function () {

		//通过store.dispatch将action传到store

          store.dispatch({ type: 'INCREMENT' })

        })

      document.getElementById('decrement')

        .addEventListener('click', function () {

          store.dispatch({ type: 'DECREMENT' })

        })

      document.getElementById('incrementIfOdd')

        .addEventListener('click', function () {

          if (store.getState() % 2 !== 0) {

            store.dispatch({ type: 'INCREMENT' })

          }

        })

      document.getElementById('incrementAsync')

        .addEventListener('click', function () {

          setTimeout(function () {

            store.dispatch({ type: 'INCREMENT' })

          }, 1000)

        })

    </script>

  </body>

</html>

Redux Counter Vanilla example的更多相关文章

  1. Redux Counter example

    此项目模板是使用Create React App构建的,它提供了一种简单的方法来启动React项目而无需构建配置. 使用Create-React-App构建的项目包括对ES6语法的支持,以及几种非官方 ...

  2. Redux-example

    Redux-example Examples from http://redux.js.org/docs/introduction/Examples.html Counter Vanilla Run ...

  3. Redux 核心概念

    http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...

  4. RxJS + Redux + React = Amazing!（译一）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  5. react+redux教程（六）redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  6. react+redux教程（四）undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  7. react+redux教程（一）connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  8. redux+flux(一：入门篇)

    React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...

  9. 通过Redux源码学习基础概念一：简单例子入门

    最近公司有个项目使用react+redux来做前端部分的实现,正好有机会学习一下redux,也和小伙伴们分享一下学习的经验. 首先声明一下,这篇文章讲的是Redux的基本概念和实现,不包括react- ...

随机推荐

  1. spring学习总结——高级装配学习二（处理自动装配的歧义性）

    我们已经看到如何使用自动装配让Spring完全负责将bean引用注入到构造参数和属性中.自动装配能够提供很大的帮助.不过,spring容器中仅有一个bean匹配所需的结果时,自动装配才是有效的.如果不 ...

  2. Docker Data Center系列（二）- UCP安装指南

    本系列文章演示如何搭建一个mini的云平台和DevOps实践环境. 基于这套实践环境,可以部署微服务架构的应用栈,演练提升DevOps实践能力. 1 系统要求 1.1 硬件和软件要求 Linux内核版 ...

  3. 软件 利用 win+R 快速启动（无需添加环境变量）

    前言:以 "Typora" 软件 为例 ,无需添加环境变量,实现键盘快速启动 第一步 找到 为知笔记的快捷方式 打开文件位置 鼠标右击该软件的桌面快捷方式 复制该软件的快捷方式 第 ...

  4. 【原】Java学习笔记004 - 运算符

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 运算符:对常量 或 ...

  5. c/c++ 重载运算符 关系，下标，递增减，成员访问的重载

    重载运算符 关系,下标,递增减,成员访问的重载 为了演示关系,下标,递增减,成员访问的重载,创建了下面2个类. 1,类StrBlob重载了关系,下标运算符 2,类StrBlobPtr重载了递增,抵减, ...

  6. powerdesigner生成mysql带注释的ER图

    1.安装PowerDesigner的 参考 https://blog.csdn.net/sinat_34104446/article/details/79885141 2配置逆向工程 2.1新建模型p ...

  7. 复制命令(ROBOCOPY)

    ROBOCOPY 命令: // 描述: 相比较 xcopy.copy 来说,复制的功能就强大很多,  xcopy.copy 是单线程的,robocopy是多线程的,但是和一些专业的复制软件相比速度还是 ...

  8. jenkins安装详细教程

    一.jenkins简介 jenkins是一个开源的软件项目,是基于java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 1.持续的软件版本 ...

  9. Django 路由层(urlconf)

    Django 的路由层(URLconf) URL配置(conf)就像是Django所支撑的网站的目录; 本质就是:URL与调用该URL执行的视图函数的映射表; 通俗的讲:就是用户使用哪个url,URL ...

  10. dotnetcore ueditor

    dotnetcore ueditor  https://github.com/durow/ueditornetcore http://www.cnblogs.com/durow/p/6116393.h ...