工作中的redux小技巧

1.使用actionTypes.js文件定义Type减少代码冗余，代码复用

export const CHANGE_INPUT='changeInput'
export const ADD_ITEM='addItem'
export const DELETE_ITEM='deleteItem'

import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from './store/actionTypes'

2.使用actionCreators.js统一管理action

actionCreators.js

import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from './actionTypes'

export const changeInputAction=(value)=>({
    type:CHANGE_INPUT,
    value
})

export const addItemAction=()=>({
    type:ADD_ITEM,
    })

export const deleteItemAction=(index)=>({
    type:DELETE_ITEM,
    index
})

TodeList.js

import { changeInputAction,addItemAction,deleteItemAction } from './store/actionCreators';

changeInputValue(e){
        //e：改变的值都可以监听到
         //console.log(e.target.value)
        //  const action={
        //     type:CHANGE_INPUT,
        //     value:e.target.value
        //  }
         const action=changeInputAction(e.target.value)
         store.dispatch(action)
    }
    clickBtn(){
        // const action ={type:ADD_ITEM}
        // store.dispatch(action)
        const action=addItemAction()
        store.dispatch(action)
    }
    deleteItem(index){
        // const action ={
        //     type:DELETE_ITEM,
        //     index
        // }
        const action=deleteItemAction(index)
        store.dispatch(action)
    }