一、 安装:
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: