Redux-example
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的更多相关文章
- RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- Redux初见
说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...
- react+redux教程（八）连接数据库的redux程序
前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...
- react+redux教程（七）自定义redux中间件
今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...
- react+redux教程（六）redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程（五）异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
随机推荐
- [Functional Programming] Using Lens to update nested object
For example, in React application, we have initial state; const data = { nextId: 4, todoFilter: 'SHO ...
- 我是陌生人 Java中导入、导出Excel
我是陌生人 Java中导入.导出Excel 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是: ...
- vbox磁盘空间如何扩容
vbox磁盘空间如何扩容 为虚拟机硬盘扩容(Oracle VM VirtualBox) VBoxManage modifyhd <uuid>|<filename& ...
- fork failed because of Out Of Memory
Maybe virtual memory over commit is prevented in your system. If it is prevented, then the virtual m ...
- nodeJS服务器的创建和重新启动
一: 首先在nodejs项目里创建一个server.js文件,输入下面代码 var http = require("http"); http.createServer(functi ...
- 图文剖析自己定义View的绘制（以自己定义滑动button为例）
自己定义View一直是横在Android开发人员面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看.ViewGroup继承View. View的子类.多是 ...
- mysql 存储引擎对索引的支持
一.首先给出mysql官方文档给出的不同存储引擎对索引的支持 从上面的图中可以得知,mysql 是支持hash索引的,但支持和不支持又和具体的存储引擎有关系.从图中看到InnoDB是支持Btree索引 ...
- Socket网络编程--聊天程序(4)
上一小节讲到可以实现多客户端与服务器进行通讯,对于每一个客户端的连接请求,服务器都要分配一个进程进行处理.对于多用户连接时,服务器会受不了的,而且还很消耗资源.据说有个select函数可以用,好像还很 ...
- 【Jetty】Jetty 的工作原理以及与 Tomcat 的比较
Jetty 应该是目前最活跃也是很有前景的一个 Servlet 引擎.本文将介绍 Jetty 基本架构与基本的工作原理:您将了解到 Jetty 的基本体系结构:Jetty 的启动过程:Jetty 如何 ...
- Python3用gevent写个文件字符串查找器
[本文出自天外归云的博客园] 1.递归遍历目录下所有文件并通过finder函数定位指定格式字符串 2.用来查找字符串的finder函数是自己定义的,这里定义了一个ip_port_finder通过正则表 ...