Redux-example

时间：2023-02-14 09:27:14

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

Redux-example

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/

项目结构

Redux-example

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/

项目结构

Redux-example

这个例子中 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/

项目结构

Redux-example

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

Redux-example的更多相关文章

  1. RxJS &plus; Redux &plus; React &equals; Amazing&excl;（译一）

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

  2. 通过一个demo了解Redux

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

  3. RxJS &plus; Redux &plus; React &equals; Amazing&excl;（译二）

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

  4. redux学习

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

  5. webpack&plus;react&plus;redux&plus;es6开发模式

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

  6. Redux初见

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

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

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

  8. react&plus;redux教程（七）自定义redux中间件

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

  9. react&plus;redux教程（六）redux服务端渲染流程

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

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

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

随机推荐

  1. hash 分区的用途是什么&quest;

    Hash partitioning enables easy partitioning of data that does not lend itself to rangeor list partit ...

  2. python简单的发送邮件

    python 利用smtplib来发送邮件,具体的代码如下 一. 编辑smtp_v2.py vim /home/python/smtp_v2.py #!/usr/bin/env python # -* ...

  3. 利用开源HTML5引擎lufylegend&period;js结合javascript实现的五子棋人机对弈

    前言     本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...

  4. SQL server 数据库（视图、事物、分离附加、备份还原）&rpar;

    ql Server系列:视图.事物.备份还原.分离附加  视图是数据库中的一种虚拟表,与真实的表一样,视图包含一系列带有名称的行和列数据.行和列数据用来自定义视图的查询所引用的表,并且在引用视图时动态 ...

  5. Python基础之字符串拼接简单介绍

    字符串拼接: %s表示可以传任意类型的值,%d表示只能传数字 test = "my name is %s,age %d" %("xyp",19) print(t ...

  6. 用Eclipse在Weka中嵌入新算法

    本文介绍添加一个新算法到Weka集成环境中的过程,并能在GUI中运行并显示其结果.想做到这一点有两种方法,一是用ANT命令生成新的weka.jar(稍后写教程),二是用IDE(Eclipse或NetB ...

  7. SQLite EF Core Database Provider

    原文链接 This database provider allows Entity Framework Core to be used with SQLite. The provider is mai ...

  8. Node&period;js的基础知识（一）

    一.Buffer类 1.创建缓冲区的三种方式 var buffer = new Buffer(10); console.log(buffer); var buffer2 = new Buffer([1 ...

  9. 非root配置linux下vim

    在机子目录下建立 .vim文件夹 例如 /home/xxx/.vim 在~文件夹下建立.vimrc文件 这是你自己配置文件 vim虽然启用了格式化高亮.行号显示,以及括号匹配.自动缩进等编辑功能,对于 ...

  10. undefined reference to symbol &OpenCurlyQuote;&lowbar;ZN2cv6String10deallocateEv

    使用qt编译Caffe时出现如下错误: undefined reference to symbol '_ZN2cv6String10deallocateEv' error adding symbols ...

相关文章