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. Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航

    一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见Actio ...

  2. python3 requests获取某网站折线图上数据

    比如要抓取某网站折线图上数据,如下截图: 借助Chrome开发者工具Network.经过分析发现获取上面的热度数据,找到对应的事件url:https://pcw-api.iqiyi.com/video ...

  3. Always run a program in administrator mode in Windows 10

    From: https://www.cnet.com/how-to/always-run-a-program-in-administrator-mode-in-windows-10/ If you'r ...

  4. Android架构初探

    #一 背景点评美团合并之后,业务需要整合,我们部门的几条业务需要往美团平台迁移,为了降低迁移成本,开发和维护成本,以及将来可能要做的单元测试,需要对架构进行相应的调整.之前的代码都堆在Activity ...

  5. ArrayList vs LinkedList 空间占用

    空间占用上,ArrayList完胜 看下两者的内存占用图   这三个图,横轴是list长度,纵轴是内存占用值.两条蓝线是LinkedList,两条红线是ArrayList,可以看到,LinkedLis ...

  6. 阿里巴巴MySQL DBA面试题答案[转]

    无意中看到阿里巴巴的面试题,,借此回首DBMS时刻趁热打铁巩固一下基础 拿到题目大概浏览了一遍难度大概在中上游水平,自己跪了接近35%的题目 自己答题如下,欢迎大家讨论分析题 1 2 3 4 5 6 ...

  7. [Aaronyang] 写给自己的WPF4.5 笔记9[复杂数据处理三步曲，数据展示ListView泪奔2/3]

     我的文章一定要做到对读者负责,否则就是失败的文章  ---------   www.ayjs.net    aaronyang技术分享 作者留言:        小小的推荐,作者的肯定,读者的支持. ...

  8. Spring开发工具Spring Tools Suite(STS)

    The Spring Tool Suite is an Eclipse-based development environment that is customized for developing ...

  9. Socket网络编程--简单Web服务器(4)

    上一小节已经实现了对图片的传输,接下来就是判断文件是否为js,css,png等格式.我们增加一个函数用于判断格式 int WebServer::get_filetype(char *type,char ...

  10. pandas删除缺失数据(pd.dropna()方法)

    1.创建带有缺失值的数据库:   import pandas as pd import numpy as np df = pd.DataFrame(np.random.randn(5, 3), ind ...