一、 安装:
npm install redux react-redux
二、入口文件:index.jsx:
- 引入:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/eb8e446746498d61bb2fe61494a11efe.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 创建reducer:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/ab904c954638d241a55a552232ee015e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 创建容器:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/3ccf1a3a23be7b400ce0bdc1556045ee.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 初始化:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/7924f2f2b898564e95754230019149dd.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 将容器绑定到属性:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/7c71a8edd21d83ec118d1b9918960154.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 完整代码:
// 核心
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:
- 引入:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/ec94568c89150f48c196d5a17ba9e85b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 定义处理函数:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/9c80e72224b8221d688bebdc154b7894.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 定义执行事件:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/c17f53a3b9b24ffacfa0521464b37971.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 导出:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/473d9f13304a777710f9f2af158ea1a6.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 完整代码:
// 核心
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
四、效果:
- 初始状态:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/5d16e73d9432f12f0502933419c3109c.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 点击item:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/25d18224f68963cacafdf2b8a75324ed.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
- 点击text:
![react-redux进阶](http://i2.51cto.com/images/blog/201805/06/849a985975fd4cef3ae01c04994d5508.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)