关于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回答

Dell

2021-07-21

可以这么写,没问题

0
1
陈枫William
非常感谢!
2021-07-22
共1条回复

React零基础入门到实战,完成企业级项目简书网站开发

主流新技术 React-redux,React-router4,贯穿基础语法

5275 学习 · 2496 问题

查看课程