场景:有5个input,每个input的value都是不同的,怎么通过一个action的方法来控制这5个不同的value.
在action里,我知道的是,一个数据类型,对应一个type.那么这5个value,应该有5个type,是吧?但是为了方便以后更改,只需要一个方法,要怎么实现呢?
下面是我的代码,5个type,5个data:
export const SET_TABONE_UNSELECT_2XKEY = 'SET_TABONE_UNSELECT_2XKEY';
export const SET_TABTWO_UNSELECT_2XKEY = 'SET_TABTWO_UNSELECT_2XKEY';
export const SET_TABTHREE_UNSELECT_2XKEY = 'SET_TABTHREE_UNSELECT_2XKEY';
export const SET_TABFOUR_UNSELECT_2XKEY = 'SET_TABFOUR_UNSELECT_2XKEY';
export const SET_TABFIVE_UNSELECT_2XKEY = 'SET_TABFIVE_UNSELECT_2XKEY';
5个action的方法:
export const SET_UN_SELECT_2XIMG_KEY = 'SET_UN_SELECT_2XIMG_KEY';
export function setUnselect2xImgQiniuKey(qiniuKey,obj){
return{
type: SET_UN_SELECT_2XIMG_KEY,
data: {
unSelect2XImgKey:qiniuKey,
unSelect2XImgObj: obj
}
}
}
export const SET_TABTWO_UNSELECT_2XKEY = 'SET_TABTWO_UNSELECT_2XKEY';
export function setTabTwoUnSelect2XKey(qiniuKey,obj){
return{
type: SET_TABTWO_UNSELECT_2XKEY,
data: {
tabTwoUnSelect2XImgKey:qiniuKey,
tabTwoUnSelect2XImgObj:obj
}
}
}
export const SET_TABTHREE_UNSELECT_2XKEY = 'SET_TABTHREE_UNSELECT_2XKEY';
export function setTabThreeUnSelect2XKey(qiniuKey,obj){
return{
type: SET_TABTHREE_UNSELECT_2XKEY,
data: {
tabThreeUnSelect2XImgKey:qiniuKey,
tabThreeUnSelect2XImgObj: obj
}
}
}
export const SET_TABFOUR_UNSELECT_2XKEY = 'SET_TABFOUR_UNSELECT_2XKEY';
export function setTabFourUnSelect2XKey(qiniuKey,obj){
return{
type: SET_TABFOUR_UNSELECT_2XKEY,
data: {
tabFourUnSelect2XImgKey:qiniuKey,
tabFourUnSelect2XImgObj: obj
}
}
}
export const SET_TABFIVE_UNSELECT_2XKEY = 'SET_TABFIVE_UNSELECT_2XKEY';
export function setTabFiveUnSelect2XKey(qiniuKey,obj){
return{
type: SET_TABFIVE_UNSELECT_2XKEY,
data: {
tabFiveUnSelect2XImgKey:qiniuKey,
tabFiveUnSelect2XImgObj:obj
}
}
}
怎么使用一个方法,实现这5个方法的功能?谢谢。
为什么要在key上面做文章?你这几个方法,只要相同的key,用type区分即可。如果key不同,很显然相应的处理方法也不同,完全没必要。
export function setKey(type, qiniuKey, obj){
return{
type,
data: {
imgKey: qiniuKey,
imgObj: obj
}
}
}
如果还是想要这么多个方法名,bind成新函数即可。
1.提取公共方法:
function genData(qiniuKey, obj, n) {
let data = {}
data[`tab${n}Select2XImgKey`] = qinuKey
data[`tab${n}UnSelect2XImgObj`] = obj
return data
}
export function setUnselect2xImgQiniuKey(qiniuKey, obj, n) {
const data = genData(qiniuKey, obj, n)
return {
type: SET_UN_SELECT_2XIMG_KEY,
data
}
}
// 后续的类似
2.合并type, 在reducer里面进行逻辑对于不同input的判断:
export const SET_TAB_UNSELECT_2XKEY = "SET_TAB_UNSELECT_2XKEY"
export function set2xImgQiniuKey(qiniuKey, obj, n) {
let data = {}
data[`tab${n}Select2XImgKey`] = qinuKey
data[`tab${n}UnSelect2XImgObj`] = obj
return {
type: SET_TAB_UNSELECT_2XKEY,
n,
data
}
}