[Redux] redux toolkit - createAction
1. 개념
Redux에서 특정 기능들을 제공하는 package
Redux 코드에서 계속 반복되는 함수생성, switch 분기처리 등 이에 소요되는 반복도를 줄이고 코드를 간결하기위해 redux에서 제공하는 일종의 package(라이브러리)이다.
2-1. createAction
action 전달 시 객체를 전달하거나, 별도 함수를 통해 전달하는 구조를
단순한 action 함수 선언만을 통해 가능하게 해주는 기능
- 함수선언과 type의 즉시 선언
import {createStore} from 'redux'
const ADD = "ADD"
const DELETE = "DELETE"
const addFunc = text => {
return {
type : ADD,
text : text,
id : Date.now()
}
}
const deleteFunc = id => {
return {
type : DELETE,
id : id
}
}
위 코드를 createAction을 통해 type을 바로 선언하면서 코드를 1차적으로 간결화할 수 있다.
const addFunc = createAction("ADD")
const deleteFunc = createAction("DELETE")
const reducer = (state=[], action) => {
switch(action.type){
case addFunc.type:
return [...state, {text : action.text, id : action.id}]
case deleteFunc.type:
return state.filter(deletedList => deletedList.id !== action.id)
default :
return state
}
}
위 코드처럼 createAction을 통해 하나의 함수를 선언하면서 type까지 같이 선언해주고, 이를 case 문에 활용하여 코드를 간결하게 작성할 수 있다.
모든 data들은 payload에 일괄적으로 저장
위에서 새롭게 정의한 addFunc, deleteFunc 부분만 고치면 logic이 정상적으로 작동하지 않는다.
createAction toolkit을 활용할 경우 data를 받아오는 방식도 바꿔줘야 한다.
function Home({doList, addFunc}) {
//console.log(props)
const [text, setText] = useState("")
function onChange(e) {
setText(e.target.value)
}
function onSubmit(e){
e.preventDefault()
addFunc(text) //call dispatch logic by specific function
setText("")
}
return(
<div>
<h1>TO DO LIST</h1>
<form onSubmit={onSubmit}>
<input type="text" value = {text} onChange={onChange}/>
<button>LIST ADD</button>
</form>
<ul>{doList.map(doListToView => <Dolistview key={doListToView.id} {...doListToView} />)}</ul>
</div>
)
}
function mapStateToProps(state) {
//console.log(state, ownProps)
return {doList : state}
}
function mapDispatchToProps(dispatch){
return {
addFunc : (text) => dispatch(actionTrigger.addFunc(text))
//you can only use dispatch(action) structure, when you give dispatch with action aruguments.
}
}
export default connect(mapStateToProps, mapDispatchToProps) (Home)
Home 화면에서 문자열을 입력하고, 이후 LIST ADD 버튼을 클릭하였을 때(혹은 엔터키) text에 저장된 내용이 addFunc 인자에 전달되면서 dispatch가 다시 호출되는 방식으로 입력되었다.
이 기존 방식에서 유의할 점은 이제는 addFunc을 통해 전달받은 {type : ~, text : ~} 객체가 없다는 점인데, 다시 말해 직접적으로 전달해주는 text 값이 없는 상태라 할 수 있다.
CreateAction을 이용하면, 자신이 받은 인자는 payload에 일괄 저장하여 전달한다.
const reducer = (state=[], action) => {
switch(action.type){
case addFunc.type:
return [...state, {text : action.payload, id : action.id}]
case deleteFunc.type:
return state.filter(deletedList => deletedList.id !== action.id)
default :
return state
}
}
submit 이벤트가 실행되었을 때
- 이벤트가 실행되면서 addFunc를 호출.
- 호출하면서 text 인자를 전달하고, 최종적으로 dispatch를 통해 action 인자를 전달.
dispatch를 통해 전달된 action 인자가 createAction으로 정의되어 있는 경우, 반드시 payload라는 저장소에 일괄적으로 저장되어 호출된다.
case addFunc.type:
return [...state, {text : action.payload, id : action.id}]
※ remind ) list add 시 state 배열에 객체가 추가되어, 새로운 객체가 return 된다.
즉 함수의 return 형태를 객체로 안맞추어도 되고, 단순히 action의 payload로부터 data를 받아 쓰기만 하면 된다.
switch(action.type){
case addFunc.type:
console.log(action)
return [...state, {text : action.payload, id : Date.now()}]
case deleteFunc.type:
return state.filter(deletedList => deletedList.id !== action.payload)
default :
return state
}
마찬가지 원리로 id값 또한 동일하게 적용된다.
※ remind ) createAction을 통해 dispatch되는 action을 통해 return되는 모든 data들은 payload에 일괄 저장
위 코드에서 리스트를 삭제하는 deletefunc의 구조를 살펴보도록 한다.
function mapDispatchToProps(dispatch, ownProps){
//console.log(ownProps)
return {
deleteFunc : () => dispatch(actionTrigger.deleteFunc(ownProps.id))
//you can only use dispatch(action) structure, when you give dispatch with action aruguments.
}
}
삭제하면서 dispatch 되는 시점에 createAction에 저장되는 인자값인 id가 payload에 저장되는 것이다(※ state 배열은 별도, dispatch를 통해 action이 전달되는 시점을 봐야한다).
case deleteFunc.type:
return state.filter(deletedList => deletedList.id !== action.payload)
따라서 같은 원리로 id값을 action.id가 아닌, action.payload로 바꿔준다.
2-2. (참조)
createAction으로 선언된 함수들을 log 출력해본다.
- console.log(addFunc, deleteFunc) → 하나의 함수임을 보여준다.
- console.log(addFunc(), deleteFunc()) → 함수 내부에 type이 선언되어있고, 이와 함께 payload도 같이 내장되어 있음을 보여준다.
payload는 state 자체가 아닌, dispatch 되면서 전달되는 인자를 저장하는 곳이다.
- dispatch하면서 함수를 호출하는 과정에서 함수에 전달된 인자가 payload에 저장된다.
- payload는 현재 저장되어 있는 state와는 별도로, dispatch 되는 시점에서 전달되는 인자이다.
2-3. 참조링크
redux toolkit 관련 공식문서
https://redux-toolkit.js.org/introduction/getting-started
다음 항목에서 계속
Author And Source
이 문제에 관하여([Redux] redux toolkit - createAction), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gyrbs22/Redux-redux-toolkit-createAction저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)