实际开发中,尤其是面向 c 端的用户,任何业务和用户操作我认为都应该包含这四种状态,loading,error,empty,success,为了简化 actionType 的分散性,所以就简单封装了一个 acitonModel
/**
* generator common actionModel 普通模型
* @param {*} prefix 前缀,需要保证唯一性
*/
export function generatorCommonActionModel(prefix) {
const load_loading_action_type = prefix + common_load_loading;
const load_empty_action_type = prefix + common_load_empty;
const load_error_action_type = prefix + common_load_error;
const load_success_action_type = prefix + common_load_success;
const get_common_action_type = prefix + get_common;
const reset_action_type = prefix + common_reset;
return {
prefix,
load_loading_action_type,
load_empty_action_type,
load_error_action_type,
load_success_action_type,
get_common_action_type,
reset_action_type,
loadLoadingActionCreator: params => ({ type: load_loading_action_type, params }),
loadEmptyActionCreator: params => ({ type: load_empty_action_type, params }),
loadErrorActionCreator: params => ({ type: load_error_action_type, params }),
loadSuccessActionCreator: (data, params) => ({ type: load_success_action_type, payload: { data, params } }),
getCommonActionCreator: params => ({ type: get_common_action_type, params }),
resetActionCreator: params => ({ type: reset_action_type, params })
}
}
actionModel 根据 key 的唯一性来区分,使用的时候直接使用该函数可以快速生成对应的 action 模型,实际运用中也确实感受到了其方便性,但随之带来的问题就来了,就是 reducer 层,始终想不到该如何去优化处理,目前的做法
/**
* 统一处理 commonModelActions
* @param {*} actionModel 需遵循 actionHelp 规范
* @param {*} stateModel 需遵循 stateModel 中的 commonStateModel 数据模型规范
* @param {*} action dispatch 出来的 action
*/
export function reducerGeneratorCommonActionModel(actionModel, stateModel, action) {
switch (action.type) {
case actionModel.load_loading_action_type:
return { ...stateModel, load_status: NetWorkComponent.LOAD_LOADING };
case actionModel.load_empty_action_type:
return { ...stateModel, load_status: NetWorkComponent.LOAD_EMPTY };
case actionModel.load_error_action_type:
return { ...stateModel, load_status: NetWorkComponent.LOAD_ERROR };
case actionModel.load_success_action_type:
return {
...stateModel,
load_status: Array.isArray(action.payload.data) ? action.payload.data.length > 0 ? NetWorkComponent.LOAD_SUCCESS : NetWorkComponent.LOAD_EMPTY : NetWorkComponent.LOAD_SUCCESS,
data: action.payload.data
};
default:
return stateModel;
}
}
export default function (state = defaultState, action) {
switch (action.type) {
//当前城市广告位
case goodShopAdvertisingCommonActionModel.load_loading_action_type:
case goodShopAdvertisingCommonActionModel.load_empty_action_type:
case goodShopAdvertisingCommonActionModel.load_error_action_type:
case goodShopAdvertisingCommonActionModel.load_success_action_type:
return { ...state, advertisings: reducerGeneratorCommonActionModel(goodShopAdvertisingCommonActionModel, state.advertisings, action) }
//当前城市的榜单列表
case goodShopRankingShopCommonActionModel.load_loading_action_type:
case goodShopRankingShopCommonActionModel.load_empty_action_type:
case goodShopRankingShopCommonActionModel.load_error_action_type:
case goodShopRankingShopCommonActionModel.load_success_action_type:
return { ...state, rankingShops: reducerGeneratorCommonActionModel(goodShopRankingShopCommonActionModel, state.rankingShops, action) }
//当前城市的爆品秒杀商品列表
case goodShopSeckillCommodityCommonActionModel.load_loading_action_type:
case goodShopSeckillCommodityCommonActionModel.load_empty_action_type:
case goodShopSeckillCommodityCommonActionModel.load_error_action_type:
case goodShopSeckillCommodityCommonActionModel.load_success_action_type:
return { ...state, seckillCommoditys: reducerGeneratorCommonActionModel(goodShopSeckillCommodityCommonActionModel, state.seckillCommoditys, action) }
//附近的商户
case goodShopNearbyShopListPagingActionModel.load_loading_action_type:
case goodShopNearbyShopListPagingActionModel.load_empty_action_type:
case goodShopNearbyShopListPagingActionModel.load_error_action_type:
case goodShopNearbyShopListPagingActionModel.load_more_loading_action_type:
case goodShopNearbyShopListPagingActionModel.load_more_empty_action_type:
case goodShopNearbyShopListPagingActionModel.load_more_error_action_type:
case goodShopNearbyShopListPagingActionModel.load_success_action_type:
return { ...state, nearbyShops: reducerGeneratorListPagingActionModel(goodShopNearbyShopListPagingActionModel, state.nearbyShops, action) }
//推荐的商户
case goodShopRecommendShopCommonActionModel.load_loading_action_type:
case goodShopRecommendShopCommonActionModel.load_empty_action_type:
case goodShopRecommendShopCommonActionModel.load_error_action_type:
case goodShopRecommendShopCommonActionModel.load_success_action_type:
return { ...state, recommendShops: reducerGeneratorCommonActionModel(goodShopRecommendShopCommonActionModel, state.recommendShops, action) }
//人气商圈的商户
case goodShopHotShopListPagingActionModel.load_loading_action_type:
case goodShopHotShopListPagingActionModel.load_empty_action_type:
case goodShopHotShopListPagingActionModel.load_error_action_type:
case goodShopHotShopListPagingActionModel.load_more_loading_action_type:
case goodShopHotShopListPagingActionModel.load_more_empty_action_type:
case goodShopHotShopListPagingActionModel.load_more_error_action_type:
case goodShopHotShopListPagingActionModel.load_success_action_type:
return { ...state, hotShops: reducerGeneratorListPagingActionModel(goodShopHotShopListPagingActionModel, state.hotShops, action) };
//人气商圈栏目分类
case goodShopHotShopClassifyCommonActionModel.load_loading_action_type:
case goodShopHotShopClassifyCommonActionModel.load_empty_action_type:
case goodShopHotShopClassifyCommonActionModel.load_error_action_type:
case goodShopHotShopClassifyCommonActionModel.load_success_action_type:
return { ...state, hotShopsClassify: reducerGeneratorCommonActionModel(goodShopHotShopClassifyCommonActionModel, state.hotShopsClassify, action) };
//榜单详情
case goodShopRankingShopDetailCommonActionModel.load_loading_action_type:
case goodShopRankingShopDetailCommonActionModel.load_empty_action_type:
case goodShopRankingShopDetailCommonActionModel.load_error_action_type:
case goodShopRankingShopDetailCommonActionModel.load_success_action_type:
return { ...state, rankingDetails: reducerMergeGeneratorCommonActionModel(goodShopRankingShopDetailCommonActionModel, state.rankingDetails, action) }
//支持的城市列表
case goodShopCitysCommonActionModel.load_loading_action_type:
case goodShopCitysCommonActionModel.load_empty_action_type:
case goodShopCitysCommonActionModel.load_error_action_type:
case goodShopCitysCommonActionModel.load_success_action_type:
return { ...state, citys: reducerGeneratorCommonActionModel(goodShopCitysCommonActionModel,
感觉这样去写,反而更累了,所以想问下 v 友门,这块要如何去设计和优化啊,再次感谢
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.