react-redux进阶

Posted 2020-11-03

一、 安装：

npm  install  redux  react-redux

二、入口文件：index.jsx：

1. 引入：
   
2. 创建reducer：
   
3. 创建容器：
   
4. 将容器绑定到属性：
   
5. 完整代码：

   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：

6. 引入：
   
7. 定义处理函数：
   
8. 定义执行事件：
   
9. 导出：
   
10. 完整代码：

    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