资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

react-redux进阶

一、 安装:

npm  install  redux  react-redux

二、入口文件:index.jsx:

  1. 引入:
    react-redux进阶
  2. 创建reducer:
    react-redux进阶
  3. 创建容器:
    react-redux进阶
  4. 初始化:
    react-redux进阶
  5. 将容器绑定到属性:
    react-redux进阶
  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. 引入:
    react-redux进阶
  8. 定义处理函数:
    react-redux进阶
  9. 定义执行事件:
    react-redux进阶
  10. 导出:
    react-redux进阶
  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. 初始状态:
    react-redux进阶
  13. 点击item:
    react-redux进阶
  14. 点击text:
    react-redux进阶

    五、补充:

  15. 引入:
    var CreateStore = require('redux').createStore
    var CombineReducers = require('redux').combineReducers
    var Provider  = require('react-redux').Provider

    react-redux进阶

    成都创新互联公司长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为盐边企业提供专业的网站制作、成都网站制作,盐边网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

  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
    }

    react-redux进阶

  17. 合并:
    var store = CombineReducers({
    api,
    progress
    })
    store = CreateStore(store)

    react-redux进阶

  18. 初始化容器内容:
    store.dispatch({
    type:"percent",
    percent:100,
    prompt:'test'
    })

    react-redux进阶

  19. 添加到组件:

    react-redux进阶


网站标题:react-redux进阶
本文来源:http://cdkjz.cn/article/igcheo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220