工作中的redux小技巧

2022-06-21 02:01:29 阅读：159 来源： 互联网

标签：const 技巧 ITEM value 工作 export action redux type

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)
    }

标签：const,技巧,ITEM,value,工作,export,action,redux,type
来源： https://www.cnblogs.com/Jarsmine/p/16395376.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

工作中的redux小技巧