redux求和案例-完整版

相较于简单版本新增了2个文件

 1.count_action.js专门用于创建action对象
 2.constant.js放置容易写错的type值

redux文件夹中新增count_action.js文件

/**该文件专门为Count组件生成action对象 */
import{INCREMENT,DECREMENT} from './constant'
export const  createIncrementAction=data=>({type:INCREMENT,data})
export const  createDecrementAction=data=>({type:DECREMENT,data})

component/Count/index.js中需要更改的部分

    //加法
    increment=()=>{
        const{value}=this.selectNumber
       //通知redux加value
       //store.dispatch({type:'increment',data:value*1})
       store.dispatch(createIncrementAction(value*1))
    }
    //减法
    decrement=()=>{
        const{value}=this.selectNumber
        //store.dispatch({type:'decrement',data:value*1})
        store.dispatch(createDecrementAction(value*1))
    }
    //奇数再加
    incrementIfOdd=()=>{
        const{value}=this.selectNumber
        const count=store.getState()
       if(count%2!=0){
        // store.dispatch({type:'increment',data:value*1})
        store.dispatch(createIncrementAction(value*1))
       }
    }
    //异步加
    incrementAsync=()=>{
        const{value}=this.selectNumber
       setTimeout(() => {
        // store.dispatch({type:'increment',data:value*1})
        store.dispatch(createIncrementAction(value*1))
       }, 500);
    }

在redux中新建const.js文件

/**该模块是用于定义action对象中type类型的常量值 ,目的只有一个:便于管理的同时防止程序员单词拼写错误*/
export const INCREMENT='increment'
export const DECREMENT='decrement'

count_reducer.js中

/**
 * 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质是一个函数
 * 2.reducer函数会接到两个参数，分别为：之前的状态(preState),动作对象(action)
 */
import{INCREMENT,DECREMENT} from './constant'
const initState=0//初始化状态
export default function countReducer(preState=initState, action) {
    console.log(preState,action)
  //从action对象中获取：type、data
  const { type, data } = action;
  //根据type决定如何加工数据
  switch (type) {
    case INCREMENT:
      return preState + data
    case DECREMENT:
      return preState - data
    default:
        return preState
  }
}