react-redux進階

一、 安裝：

npm  install  redux  react-redux

二、入口文件：index.jsx：

1. 引入：
   
2. 創建reducer：
   
3. 創建容器：
   
4. 初始化：
   
5. 將容器綁定到屬性：
   
6. 完整代碼：

   // 核心
   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
   // 創建容器
   var reducer_item = ReduxFactory
   var reducer_text = ReduxFactory
   var item = createStore(reducer_item)
   var text = createStore(reducer_text)
   // 創建組件
   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：

7. 引入：
   
8. 定義處理函數：
   
9. 定義執行事件：
   
10. 導出：
    
11. 完整代碼：

    // 核心
    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

    四、效果：

12. 初始狀態：
    
13. 點擊item：
    
14. 點擊text：
    

    五、補充：

15. 引入：

    var CreateStore = require('redux').createStore
    var CombineReducers = require('redux').combineReducers
    var Provider  = require('react-redux').Provider

    

16. 創建容器：

    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
    }

    

17. 合并：

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

    

18. 初始化容器內容：

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

    

19. 添加到組件：

    <Provider store={store}>