此示例不需要构建系统或视图框架，并且存在以显示与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. 南京邮电大学java第三次实验报告

    实 验 报 告 ( 2017 / 2018学年 第2学期) 课程名称 JAVA语言程序设计 实验名称 Java集成开发环境的安装与使用. Java变量.表达式与控制结构 实验时间 2018 年 4 月 ...

  2. 新版的nuget包 PackageLicense 这样写

    Intro 最近编译类库项目的时候发现总是有个 licenseUrl 的警告,警告信息如下: warning NU5125: The 'licenseUrl' element will be depr ...

  3. angular应用容器化部署

    angular 应用容器化部署 Intro 我自己有做一个个人主页,虽然效果不怎么样(不懂设计的典型程序猿...),但是记录了我对于前端框架及工具的一些实践, 从开始只有一个 angularjs 制作 ...

  4. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  5. js判断时间是否超过了16:30

    // 判断时间是否超过了16:30 // true: 已超时 // false: 未超时 function timeCompare() { var now = new Date(); var nowT ...

  6. 如何用git上传代码到github详细步骤

    注册账户 这个小菜鸟带着心跳写的第一篇博客! 还请大家多多提点! 想使用github,第一步肯定是要注册github账号,有了账号就是直接登录啦 可以直接打开http://github.com页面注册 ...

  7. SQLServer之删除存储过程

    删除存储过程注意事项 在删除任何存储过程之前,请检查依赖对象,并且相应地修改这些对象. 如果没有更新这些对象,则删除存储过程可能会导致依赖对象和脚本失败. 若要显示现有过程的列表,请查询 sys.ob ...

  8. Linux/Unix环境下的make命令详解

    https://blog.csdn.net/wxqian25/article/details/21226711

  9. SQLServer之索引简介

    索引设计基础知识 索引是与表或视图关联的磁盘上结构,可以加快从表或视图中检索行的速度. 索引包含由表或视图中的一列或多列生成的键. 这些键存储在一个结构(B 树)中,使 SQL Server 可以快速 ...

  10. centos7下 svn的配置

    安装svn yum install subversion 查看安装版本 svnserve --version 创建svn版本库目录 mkdir -p /root/svn/test 创建svn版本库 s ...