关于actions的封装
来源:5-5 Action 和 Reducer 的编写
陈枫William
2021-07-20
actions建议封装起来,方便后续的维护和扩展(下面是伪代码)
// actions.js
const deepCopy = obj => JSON.parse(JSON.stringify(obj))
const actions = {
//...
change_input_value(state, action){
const newState = deepCopy(state)
newState.inputValue = action.value
return newState
}
//...
add_todo_item(state){
const newState = deepCopy(state)
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
}
export default actions
// store.js
import actions from './actions'
export default function(state, action){
const type = action.type
if(actions[type] && typeof actions[type] === 'function'){
return actions[type](state, action)
}
}
到后期项目做大了,还可以对 actions 进行拆分:
// login.actions.js
export default {
signup(state,action){}
signin(state,actions){}
}
// order.actions.js
export default {
getOrderList(state,action){}
getOrderDetail(state,action){}
}
在 actions 中统一导出,这样在团队分工的时候,可以A负责一个模块,B负责另外一个模块,代码也不容易冲突
// actions.js
import loginActions from './login.actions'
import orderActions from './order.actions'
const actions = {
...loginActions,
...orderActions
}
export default actions
写回答
1回答
-
可以这么写,没问题
012021-07-22
相似问题