react-redux-counter

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.0/react-redux.min.js"></script>
<div id="root"></div>

Babel + JSX

const {connect, Provider} = ReactRedux;
const {createStore, applyMiddleware} = Redux;

//actions常量
const INCREMENT='INCREMENT';
const DECREMENT='DECREMENT';
//Action creator
const increment =() => {
  return {
    type: 'INCREMENT'
  }
}

const decrement =() => {
  return {
    type: 'DECREMENT'
  }
}


//reducer
const initialState = {
  count: 0
}

const reducer = (state = initialState, action) =>{
  // console.log(action)
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

/* switch (action.type) {
    case INCREMENT:
      return Object.assign({},state,{count:state.count+1})
    case DECREMENT:
      return Object.assign({},state,{count:state.count-1})
 */


//无状态组件Counter.js
class Counter extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
  
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.props.onDecrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.props.onIncrement}>+</button>
        </div>
      </div>
    )
  }
}
/* Counter.propTypes = {
    count      : PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired
} */


/* const Counter = ({ count, onDecrement, onIncrement }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={onDecrement}>-</button>
    <button onClick={onIncrement}>+</button>
  </div>
) */


//容器组件（CounterContainer.js）对无状态组件进行包裹
//container接收action，通过dispatch将action传递给store

//这里调用了react-redux的connect方法，用于将UI组件生成容器组件，其实就是将两者connect连接在一起，connect需要接受两个参数，mapStateToProps和mapDIspatchToProps。
//mapStateToProps方法是讲state转成props传给UI组件，mapDispatchToProps是UI组件参数到store.dispatch的映射，就是接收UI组件传入的action，最后的Counter就是UI组件。

const mapStateToProps = state => {
  return {
    count: state.count
  }
}
const...