react-redux

redux的作用

react 本身是通过props传递state的，层级嵌套太深的话，传递属性就需要一层层向下传递，回传也需要一层层的回调。
redux 的作用就是实现跨级传递state
react-redux 是连接react && redux的插件

简单例子

实现数字增加和减少

QQ20181113-2@2x.png

app.js

//app.js
import React from ‘react’
import ReactDOM from 'react-dom’
import {Provider} from 'react-redux’
import Action from './Action’
import store from './Reducers’

ReactDOM.render(<Provider store={store}><Action/></Provider>, document.getElementById('root’));

Reducers.js

//Reducers.js
import {createStore} from “redux”;

let reducers = function(state=1, action){
  switch (action.type) {
    case ‘ADD’:
      return state + 1;
      break;
    case ‘DEC’:
      return state - 1;
      break;
    default:
      return state;
  }
};

export default createStore(reducers);

Action.js

//Action.js
import {connect} from 'react-redux’
class Action extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        <h1>current number: {this.props.state}</h1>
        <button onClick={this.props.dec}>dec</button>
        <button onClick={this.props.add}>add</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    state:state
  }
}
function mapDispatchToProps(dispatch) {
  return {
    add:function(e){
      const action = {
        type: ‘ADD’,
      };
      dispatch(action);
    },
    dec:function(){
      const action = {
        type: ‘DEC’
      };
      dispatch(action);
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Action);