一、 安装：
npm install redux react-redux
二、入口文件：index.jsx：
- 引入：
- 创建reducer：
- 创建容器：
- 初始化：
- 将容器绑定到属性：
- 完整代码：
// 核心
var React = require('react')
var ReactDom = require('react-dom')
var CreateClass = require('create-react-class')
var createStore = require('redux').createStore
var Provider = require('react-redux').Provider
// 引入组件
var App = require('./static/jsx/app.jsx')
var Item = App.Item
var Text = App.Text
// 创建容器
var reducer_item = function(state='',action){
var type = action.type
return type
}
var reducer_text = function(state='',action){
var type = action.type
return type
}
var item = createStore(reducer_item)
var text = createStore(reducer_text)
item.dispatch({
type:'hello'
})
text.dispatch({
type:'world'
})
// 创建组件
var Index = CreateClass({
render:function(){
return (
<div>
<Provider store={item}>
<Item/>
</Provider>
<Provider store={text}>
<Text/>
</Provider>
</div>
)
}
})
// 渲染
ReactDom.render(
<Index/>,
document.getElementById('app')
)
三、子组件：app.jsx：
- 引入：
- 定义处理函数：
- 定义执行事件：
- 导出：
- 完整代码：
// 核心
var React = require('react')
var ReactDom = require('react-dom')
var CreateClass = require('create-react-class')
var connect = require('react-redux').connect
// 创建组件
var Item = CreateClass({
todo:function(){
var type = 'item'
this.props.dispatch({
type:type
})
},
render:function(){
return (
<div onClick={this.todo}>
值：{this.props.state}
</div>
)
}
})
var Text = CreateClass({
todo:function(){
var type = 'text'
this.props.dispatch({
type:type
})
},
render:function(){
return (
<div onClick={this.todo}>
值：{this.props.state}
</div>
)
}
})
var Item = connect(function(state){
return {
state:state
}
})(Item)
var Text = connect(function(state){
return {
state:state
}
})(Text)
var App = {
Item:Item,
Text:Text
}
module.exports = App
四、效果：
- 初始状态：
- 点击item：
- 点击text：
