react-redux進階
阿新 • • 發佈:2018-05-06
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 App = require(‘./static/jsx/app.jsx‘) var reducers = function(state = 0, action){ switch (action.type){ case "ADD": return state+1; break; case "DEC": return state-1; break; default: return state } } var store = createStore(reducers); store.dispatch({type:‘‘}) var Index = CreateClass({ render:function(){ return ( <Provider store={store}> <App/> </Provider> ) } }) // 渲染 ReactDom.render( <Index/>, 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 App = CreateClass({ add:function(){ this.props.dispatch({ type: "ADD" }) }, dec:function(){ this.props.dispatch({ type: "DEC" }) }, render:function(){ return ( <div> <h1>當前數字是:{this.props.state}</h1> <button onClick={this.dec}>dec</button> <button onClick={this.add}>add</button> </div> ) } }) var App = connect(function(state){ return { state:state } })(App) module.exports = App
react-redux進階