前言：
盡管redux存在對緩存數(shù)據(jù)的模塊化拆分，但隨著項目的整體業(yè)務(wù)邏輯的一步步壯大，需要管理的數(shù)據(jù)和狀態(tài)也逐步增加；
于是，繁復(fù)的switch代碼讓部分reducer顯得很復(fù)雜，給后期維護(hù)增加了工作量之余，也對開發(fā)階段造成了一定的影響。
需求：
針對上述情況，于是想著是否能做一些代碼結(jié)構(gòu)的調(diào)整，讓此部分代碼顯得清晰明了，減輕開發(fā)和維護(hù)階段的工作量？
參考思路：
在vue里運(yùn)用vuex之初，基本上是照著官方文檔敲得代碼，于是，盡管做了模塊化拆分，但大量相似的mutation還是讓頁面顯得很臃腫。
然后發(fā)現(xiàn)實際上大部分的mutation操作的邏輯是類似的，都是重新賦值操作；于是，對mutations部分的實現(xiàn)變成了如下所示：
const mutations = {}
Object.keys(state).forEach(prop => {
? const setProp = `set${prop.charAt(0).toUpperCase()}${prop.slice(1)}`
? mutations[setProp] = (state, payload) => {
? ? state[prop] = payload
? }
})
如上實現(xiàn)方式的好處有兩點：
1，純函數(shù)：將mutation變成了安全的純函數(shù)的形式
2，邏輯單一：不用再去考慮在mutation里寫入其他不必要的邏輯（因為這些邏輯實際上可以在commit之前就完成）
嘗試實現(xiàn)：
根據(jù)上述對vuex里mutation部分的實現(xiàn)，也許我們可以將如下reducer的形式:
const initUser = {
? ? user_info: {}
}
export default (user=initUser,action) => {
? ? switch (action.type){
? ? ? ? case 'update_user_info':
? ? ? ? ? ? return Object.assign({}, user, {
? ? ? ? ? ? ? ? user_info: action.user_info,
? ? ? ? ? ? ? ? token:? action.token || 'zixiaochen'
? ? ? ? ? ? })
? ? ? ? ? ? break;
? ? ? ? case 'user_is_update':
? ? ? ? ? ? return Object.assign({}, user, {
? ? ? ? ? ? ? ? update_info: action.update_info
? ? ? ? ? ? })
? ? ? ? ? ? break;
? ? ? ? case 'clear_user':
? ? ? ? ? ? return user;
? ? ? ? ? ? break;
? ? ? ? default:
? ? ? ? ? ? return user
? ? }
}
修改為：
const actions = {}
Object.keys(initUser).forEach(prop => {
? const setProp = `update_${prop}`
? actions[setProp] = (state, payload) => {
? ? return {
...state,payload
? ? }
})
export default (user=initUser,action) => {
actions[action.type](user,action.updateData);
}
實現(xiàn)思路為：
1，將redux里數(shù)據(jù)變更的部分拆分出來，作vue中mutation的處理；
2，用...擴(kuò)展符號，淺復(fù)制一個相同的數(shù)據(jù)對象，然后用新增數(shù)據(jù)部分payload對象去合并覆蓋該復(fù)制對象里的已有屬性的值
3，調(diào)用actions里的方法，傳入state對象和需要變更的數(shù)據(jù)對象（也就是payload對應(yīng)的實參）
參考文檔：
動手實現(xiàn) React-redux：
http://huziketang.mangojuice.top/books/react/lesson30
如何更優(yōu)雅地使用 Redux：
https://cloud.tencent.com/developer/article/1005855
vue官方文檔
hippus關(guān)于vuex的代碼優(yōu)化
