redux之深度学习

参考： https://www.cnblogs.com/passkey/p/9910760.html ；

1. 先搞清楚action、reducer、constants之间的联系和各自职责；
   action: 告诉别人要干什么，返回想要做什么的初始参数
   reducer: 分配要干什么的，具体逻辑怎么做，最终返回处理过的数据，存到state上
   constants: 链接action和reducer的type

2. @connet()的使用(前提是react-redux,结合体，redux本身很简单使用)

   connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
   2.1. mapStateToProps(state, ownProps) : stateProps

   mapStateToProps : 这个函数允许我们将 store 中的数据作为 props 绑定到组件上。

   	const mapStateToProps = (state) => {
   	  return {
   	    count: state.count //
   	  }
   	}
   

2.2 mapDispatchToProps(dispatch, ownProps): dispatchProps
解释： connect 的第二个参数是 mapDispatchToProps，它的功能是，将 action 作为 props 绑定到 MyComp上 ;

初始效果：

  	const mapDispatchToProps = (dispatch, ownProps) => {
  	  return {
  	    increase: (...args) => dispatch(actions.increase(...args)),
  	    decrease: (...args) => dispatch(actions.decrease(...args))
  	  }
  	}

  	class MyComp extends Component {
  	  render(){
  	    const {count, increase, decrease} = this.props;
  	    return (<div>
  	      <div>计数：{this.props.count}次</div>
  	      <button onClick={increase}>增加</button>
  	      <button onClick={decrease}>减少</button>
  	    </div>)
  	  }
  	}

  	const Comp = connect(mapStateToProps， mapDispatchToProps)(MyComp);

引入bindActionCreators后的效果：(引入bindActionCreators的目的：调用increase的时候，为了不明显的感知到，dispatch的存在，来将action包装成直接可被调用的函数)

  import {bindActionCreators} from 'redux'; //  bindActionCreators(actionCreators,dispatch) 第一个参数是个action对象，第二个参数是dispatch
  const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
      increase: action.increase,
      decrease: action.decrease
    },dispatch);
  }
  class MyComp extends Component {
  	  render(){
  	    const {count, increase, decrease} = this.props;
  	    return (<div>
  	      <div>计数：{this.props.count}次</div>
  	      <button onClick={increase}>增加</button>
  	      <button onClick={decrease}>减少</button>
  	    </div>)
  	  }
  	}
  	const Comp = connect(mapStateToProps， mapDispatchToProps)(MyComp);

reduex最简易demo
通过 reducer 创建一个 store，每当我们在 store 上 dispatch 一个 action，store 内的数据就会相应地发生变化。

const reducer = (state = {count: 0}, action) => {
  switch (action.type){
    case 'INCREASE': return {count: state.count + 1};
    case 'DECREASE': return {count: state.count - 1};
    default: return state;
  }
}

const actions = {
  increase: () => ({type: 'INCREASE'}),
  decrease: () => ({type: 'DECREASE'})
}

const store = createStore(reducer);

store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}

connent-demo

import { connect } from '@tarojs/redux'
import { bindActionCreators } from 'redux'
import * as userActions from '@redux/actions/user'
import * as cartActions from '@redux/actions/cart'
import * as productActions from '@redux/actions/product'

import getLocation from '../../pages/common/getLocation'
import getUserInfo from '../../pages/common/getUserInfo'


export type IConnectProps = {
  $cart: any;
  $product: any;
  $user: IUserInfo;
  actions: IActions;
}

function defaultMapStateToProps(state) {
  return {
    $user: state.user,
    $cart: state.cart,
    $product: state.product,
  };
}

function defaultMapDispatchToProps(dispatch: any) {
  return {
    actions: {
      $user: bindActionCreators(Object.assign({}, userActions), dispatch),
      $cart: bindActionCreators(Object.assign({}, cartActions), dispatch),
      $product: bindActionCreators(Object.assign({}, productActions), dispatch),
    }
  }
}
export default function createContainer() {
  const curMapStateToProps: any =  defaultMapStateToProps;
  const curMapDispatchToProps: any = defaultMapDispatchToProps;
  return function connectAppScreen(constructor) {
    constructor = getLocation(constructor);
    constructor = getUserInfo(constructor);
    return connect(curMapStateToProps, curMapDispatchToProps)(constructor);
  }
}