Redux-example

Examples from http://redux.js.org/docs/introduction/Examples.html

Counter Vanilla

Run the Counter Vanilla example:

git clone https://github.com/reactjs/redux.git

cd redux/examples/counter-vanilla

open index.html

index.html

<!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

        }

        switch (action.type) {

          case 'INCREMENT':

            return state + 1

          case 'DECREMENT':

            return state - 1

          default:

            return state

        }

      }

      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({ 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>

分析：

function counter(state, action) {....} 作为一个函数，通过var store = Redux.createStore(counter) 变成了一个 store。

这个 store的两个参数可以通过store.getState() 和 store.dispatch({ type: 'INCREMENT' })使用，返回值皆为 state。

store.subscribe(callbackFunc) 这个函数用于监听 state的变化，并调用 callbackFunc.

其中 dispatch 函数还可以进行异步调用：

setTimeout(function () {

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

}, 1000)

Counter

Run the Counter example:

git clone https://github.com/reactjs/redux.git

cd redux/examples/counter

npm install

npm start

open http://localhost:3000/

项目结构

reducers 中 store 函数

export default (state = 0, action) => {

  switch (action.type) {

    case 'INCREMENT':

      return state + 1

    case 'DECREMENT':

      return state - 1

    default:

      return state

  }

}

index.js 中通过 prop传递 store

const render = () => ReactDOM.render(

  <Counter

    value={store.getState()}

    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}

    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}

  />,

  rootEl

)

Todos

Run the Todos example:

git clone https://github.com/reactjs/redux.git

cd redux/examples/todos

npm install

npm start

open http://localhost:3000/

项目结构

这个例子中 store 不再是一个组件组成，而是由多个组件混合。并且 store中对 action的操作不再仅仅是判断 action.type，还可以获取更多的 action属性。

使用 react-redux 的 Provider 创建一个带有 store的容器

import { createStore } from 'redux'

import { Provider } from 'react-redux'

import reducer from './reducers'

const store = createStore(reducer)

render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

)

而 App 组件是由3个组件构成

const App = () => (

  <div>

    <AddTodo />

    <VisibleTodoList />

    <Footer />

  </div>

)

其中一个组件，调用 dispatch 传递 action函数作为参数。
而通过react-redux 的 connect 组件将其关联到 store上。

import { connect } from 'react-redux'

import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {

  let input

  return (

    <div>

      <form onSubmit={e => {

        e.preventDefault()

        if (!input.value.trim()) {

          return

        }

        dispatch(addTodo(input.value))

        input.value = ''

      }}>

        <input ref={node => {

          input = node

        }} />

        <button type="submit">

          Add Todo

        </button>

      </form>

    </div>

  )

}

AddTodo = connect()(AddTodo)

TodoMVC

Run the TodoMVC example:

git clone https://github.com/reactjs/redux.git

cd redux/examples/todomvc

npm install

npm start

open http://localhost:3000/

项目结构

这个项目跟上个项目并无大致，只不过多了一个 constants。它的作用主要是把字符串变成常量。

Redux-example的更多相关文章

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

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

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. RxJS + Redux + React = Amazing!（译二）

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

  4. redux学习

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

  5. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  6. Redux初见

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

  7. react+redux教程（八）连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  8. react+redux教程（七）自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

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

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

  10. react+redux教程（五）异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

随机推荐

  1. 〖Java〗Eclispe安装和使用viplugin

    习惯了VIM的操作,每次打开Eclipse都习惯性的按下 hjkl: 感觉蛋疼了使用一下VIPlugin,发现给编码速度造成了成吨的伤害- 这个插件对于习惯于使用VIM的程序员来说,简直太有必要了.. ...

  2. 使用 vmstat, mpstat 和 sar 查看系统运行参数

    vmstat 字段含义 Procs r: The number of processes waiting for run time. 等待执行的进程, 数字越大意味着CPU越忙, 果该数字经常大于逻辑 ...

  3. [转] Dangers of using dlsym() with RTLD_NEXT

    There are times when you want to wrap a library function in order to provide some additional functio ...

  4. Swift 柯里化

    前言 由于柯里化在业务层的应用较少,所以从 Swift 3.0 开始移除了柯里化的用法,但是 Swift 的很多底层特性是使用柯里化来表达的. 1.柯里化 1.1 柯里化简介 柯里化(Currying ...

  5. 【转载】ASP.NET MVC的过滤器【Filters】

    文章来自: http://www.cnblogs.com/HopeGi/p/3342083.html 这篇对Filters讲的很详细.正好我自己也不用写了,真的很棒的一篇文章 APS.NET MVC中 ...

  6. 茗洋Easy UI 1.3.5 部分问题解决系列专题[自定义alert关闭时间，自动关]

    [评论,楼层数为30的倍数的,我送你我自己的博客园的皮肤,该博客参与活动] 这次我又给大家带来的EasyUI的我研究拓展的新特性 我使用的是  EasyUI 1.3.5版本的,项目是ASP.NET M ...

  7. 11G新特性 -- RMAN Multisection Backups

    Oracle 11g支持以sections的方式来备份和还原数据文件.在section级别进行备份,被称作multisection backup(多段备份).section是一个数据文件中连续的块.m ...

  8. TypeError: sequence item 0: expected string, Tag found

    原始代码: soup = BeautifulSoup(result, 'html.parser') content_list = soup.find_all('p', attrs={"cla ...

  9. PureFTP被动端口设置

    修改Pureftp的配置文件把 # PassivePortRange          30000 50000 把前面的#删除 重启pureftpd 注意把被动端口防火墙例外 如果是阿里云主机 安全规 ...

  10. 这可能由 CredSSP 加密 oracle 修正引起的。

    某天在与服务器进行远程连接时,遇到了以下错误: 发生了身份验证错误. 不支持请求的函数. 远程计算机: <主机名> 这可能由 CredSSP 加密 oracle 修正引起的. 有关更多信息 ...