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. 微信小程序wx.switchTab传参问题

    业务背景:从提问跳到列表需要刷新,以显示刚提交的数据. 但是官方文档 wx.switchTab 明确指明路径后是不能带参数的,怎么办? 网上有很多解决方案是:switchTab成功跳转后调用succe ...

  2. centos7下安装gcc7

    之前写过在linux下升级gcc 4.8至gcc 4.9的过程,现在gcc最新的版本是8,有些软件必须是gcc 7或者以上的版本才可以编译,比如clickhouse,gcc 7的安装过程和之前基本上一 ...

  3. Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航

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

  4. CSS 布局整理

    1.css垂直水平居中 效果: HTML代码: <div id="container"> <div id="center-div">&l ...

  5. SQL Server为字段添加默认值

    SQL Server为字段添加默认值 if not exists ( select * from sys.columns as c join sys.objects as o on c.default ...

  6. java 高级用法整理

    一.retentionpolicy.class vs runtime区别 java5,增加了注解的功能:其中retentionpolicy注解的生命周期,提供了三种选择策略 source.class和 ...

  7. 阿里云centos安装docker-engine实践

    近日在阿里云ECS服务器(centos系统)中安装docker,参考官方指南 https://docs.docker.com/engine/installation/linux/centos/  大概 ...

  8. 盒型图(boxplot)

      最近在摆弄数据离散度的时候遇到一种图形,叫做盒图(boxplot).它对于显示数据的离散的分布情况效果不错. 盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数 ...

  9. 用H5上传文件

    //1,第一步读取用户选中的文件 <input type="file" accept="image/*" onchange = "selecte ...

  10. axios的初步使用

    1.数据格式 [ { "title": "喵1", "href": "1", "url": &quo ...