redux01

redux基本概念

createStore

创建容器：需要把REDUCER传递进来

reducer作用

1. 记录所有状态修改的信息（根据标识action.type 设置修改状态）
2. 修改容器中的状态信息

参数

• state: 容器中原有的状态信息（如果第一次使用，没有原有状态，我们需要赋予一个默认值）
• action：dispatch任务派发时传递的行为对象（这个对象必有一个type属性，是操作的行为标识，REDUCER就是根据这个行为标识来识别该如何修改状态信息）

  import {createStore} from 'redux';
  
  let reducer = (state = {n: 0, m: 0}, action) => {
      switch (action.type) {
          case 'VOTE_SUPPORT':
              state = {...state, n: state.n + 1};
              break;
          case 'VOTE_AGAINST':
              state = {...state, m: state.m + 1};
              break;
      }
      return state;//=>只有把最新的STATE返回，原有的状态才会被修改
  };
  let store = createStore(reducer);

store

createStore(reducer)返回的store提供了三个方法

1. dispatch：派发行为（传递一个对象，对象中有一个TYPE属性） 通知reducer修改状态信息
2. subscribe：事件监听，当reducer 容器状态变化 触发事件
3. getState：获取最新管理的状态信息。

redux简单应用

Vote

import React from 'react';
import PropTypes from 'prop-types';
import VoteBody from "./VoteBody";
import VoteFooter from "./VoteFooter";

export default class Vote extends React.Component{
  // 默认props
  static defaultProps = {
    title:'',
    count:{
      m:0,
      n:0
    }
  }

  constructor(props){
    super(props)
  }

  render(){
    let {store} = this.props
    return <section className={'panel panel-default'} style={{width: '50%', margin: '20px auto'}}>
      <VoteBody store={store}/>
      <VoteFooter store={store}/>
    </section>
  }
}

VoteBody

import React from 'react';
import PropTypes from 'prop-types';
import React from 'react';
import PropTypes from 'prop-types';

export default class VoteBody extends React.Component{
  constructor(props){
    super(props)
    // 初始化状态
    let {store:{getState}} = this.props,
      {n,m} = getState();
      this.state = {
        n,
        m
      }
  }

  componentDidMount(){
    let {store : {getState,subscribe}} = this.props;
    let unsubscribe = subscribe(()=>{
      // 当reducer接收到 dispatch 传来的action对象，改变状态时，函数执行，刷新组件状态
      let {n, m} = getState();
      this.setState({
          n,
          m
      });
    })
     //unsubscribe(); 把当前追加的方法移除，解除绑定的方式
  }

  render(){
    let {n,m} = this.state;
    let rate = (n / (n+m)) * 100;
    isNaN(rate) ? rate = 0 : null;

    return <div className={'panel-body'}>
    支持人数：<span>{n}</span>
    <br/>
    反对人数：<span>{m}</span>
    <br/>
    支持比率：<span>{rate.toFixed(2) + '%'}</span>
    </div>
  } 
}

VoteFooter

import React from 'react';
import PropTypes from 'prop-types';

export default class VoteFooter extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    let {store: {dispatch}} = this.props;
    return <div className={'panel-footer'}>
      <button className={'btn btn-success'} onClick = {()=>{
        dispatch({
          type: 'VOTE_SUPPORT'
        })
      }}>支持</button>
      &nbsp;&nbsp;
      <button className={'btn btn-danger'} onClick={() => {
          dispatch({
              type: 'VOTE_AGAINST'
          });
      }}>反对
      </button>
    </div>
  }
}