react-redux进阶-创新互联
一、 安装:
npm install redux react-redux
二、入口文件:index.jsx:
- 引入:
- 创建reducer:
- 创建容器:
- 初始化:
- 将容器绑定到属性:
- 完整代码:
// 核心 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 (
, document.getElementById('app') ) 三、子组件:app.jsx:
- 引入:
- 定义处理函数:
- 定义执行事件:
- 导出:
- 完整代码:
// 核心 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四、效果:
- 初始状态:
- 点击item:
- 点击text:
五、补充:
- 引入:
目前创新互联已为成百上千家的企业提供了网站建设、域名、网络空间、网站托管、服务器托管、企业网站设计、崇州网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。var CreateStore = require('redux').createStore var CombineReducers = require('redux').combineReducers var Provider = require('react-redux').Provider
- 创建容器:
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 }
- 合并:
var store = CombineReducers({ api, progress }) store = CreateStore(store)
- 初始化容器内容:
store.dispatch({ type:"percent", percent:100, prompt:'test' })
- 添加到组件:
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文标题:react-redux进阶-创新互联
URL网址:http://myzitong.com/article/dddcij.html