react-redux進階

一、安裝：

npm  install  redux  react-redux

二、入口文件：index.jsx：

引入：
創(chuàng)建reducer：
創(chuàng)建容器：
初始化：
將容器綁定到屬性：

完整代碼：

// 核心
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 ReduxFactory = require('dollarphp-redux-factory')
// 引入組件
var App = require('./static/jsx/app.jsx')
var Item = App.Item
var Text = App.Text
// 創(chuàng)建容器
var reducer_item = ReduxFactory
var reducer_text = ReduxFactory
var item = createStore(reducer_item)
var text = createStore(reducer_text)
// 創(chuàng)建組件
var Index = CreateClass({
componentWillMount :function(){
item.dispatch({
    type:'hello'
})
text.dispatch({
    type:'world'
})
},
render:function(){
return (
    <div>
        <Provider store={item}>
            <Item/>
        </Provider>
        <Provider store={text}>
            <Text/>
        </Provider>
    </div>
)
}
})
// 渲染
ReactDom.render(
 <Index/>,
 document.getElementById('app')
)

三、子組件：app.jsx：

引入：
定義處理函數(shù)：
定義執(zhí)行事件：
導出：

完整代碼：

// 核心
var React = require('react')
var ReactDom = require('react-dom')
var CreateClass = require('create-react-class')
var connect = require('react-redux').connect
// 創(chuàng)建組件
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

四、效果：

初始狀態(tài)：
點擊item：
點擊text：
五、補充：
引入：
```
var CreateStore = require('redux').createStore
var CombineReducers = require('redux').combineReducers
var Provider  = require('react-redux').Provider
```
成都創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鹽邊企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站制作，鹽邊網(wǎng)站改版等技術服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

創(chuàng)建容器：

var api = function(state = 'http://api.dollarphp.com/',action){
var type = action.type
if(type == 'background'){
    state += 'blog/login/background'
}else if(type == "login"){
    state += 'blog/login/login'
}
return state
}
var progress = function(
    state = {
        percent:0,
        prompt:'',
        display:'block'
    },
    action
){
var type = action.type
if(type == 'progress'){
    state.percent = action.percent
    state.prompt = action.prompt
    if(action.percent == 100){
        state.display = 'none'
    }
}
return state
}

react-redux進階

合并：

var store = CombineReducers({
api,
progress
})
store = CreateStore(store)

react-redux進階

初始化容器內(nèi)容：

store.dispatch({
type:"percent",
percent:100,
prompt:'test'
})

react-redux進階

添加到組件：
```
<Provider store={store}>
```

網(wǎng)站欄目：react-redux進階
文章起源：http://bm7419.com/article40/igcheo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設、建站公司、App設計、網(wǎng)站收錄、外貿(mào)建站、虛擬主機

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

react-redux進階

一、 安裝：

二、入口文件：index.jsx：

三、子組件：app.jsx：

四、效果：

五、補充：

一、安裝：

二、入口文件：index.jsx：

三、子組件：app.jsx：

四、效果：

五、補充：