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 (
       
   
           
               
           
           
               
           
       
   )
   }
   })
   // 渲染
   ReactDom.render(
    ,
    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 (
        
    
            值：{this.props.state}
        
    )
    }
    })
    var Text = CreateClass({
    todo:function(){
    var type = 'text'
    this.props.dispatch({
        type:type
    })
    },
    render:function(){
    return (
        
    
            值：{this.props.state}
        
    )
    }
    })
    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. 添加到组件：

    

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享标题：react-redux进阶-创新互联
URL网址：http://cdxtjz.cn/article/dddcij.html