react Reducer의 dispatch부분에 궁금증이 있습니다

Question

안녕하세요 일본 프로그래머 신입인 외노자입니다!react를 공부하면서 회사에서 Reducer을 사용하고있어서 궁금증이 있어서 질문드립니다!export type Action ={actionType : 'EDIT_FORM' }export type State = {test : string}export function defaultState():State {return {test : ''}}export function reducer(state : State , action : Action):State {switch(action.actionType) {case 'EDIT_FORM' : return {...state,test : 'Hello'}return state}}대충 이러한 reducer를 작성하고 설명드리겠습니다여기서 EDIT_FORM을 사용하는 함수를 하나 만든다고 가정을 하고export async function editForm(dispatch : Dispatch) {dispatch({ actionType : 'EDIT_FORM'})}이런 함수를 만들어서page.tsx에서 const [state , dispatch] = useReducer(reducer , defaultState())editForm(dispatch) 넣어서 실행한다고 했을때위에 보이는 export async function editForm(dispatch : Dispatch) 이 함수에 async 가 붙어있는데 await를 사용하고있지 않으니까 export function editForm(dispatch: Dispatch) 이렇게 적어도 상관없지않나요??아니면 어떠한 Reducer의 기능적인 문제가 있어서 반환값을 Promise로 해야되는건가 아니면 상관이 없는건가 신경쓰여서 이것저것 react 공식사이트나 찾아보아도 (제가 잘 못찾은걸수도있습니다.. ㅠ) 찾지못해서...왜 await를 사용하지않는데 async function editForm 이라고 적는지 잘 모르겠습니다 ㅠ 선배님들 도와주세요 ㅠㅠ ( 정말로 핑프같지만 정말 열심히 찾아본 결과 질문하는것입니다 ㅠ 혹시 출저라던가 알수있으면 정말 감사하겠습니다! )

풍월상신(가니메디안) · Answer

useReducer 는 제가 일고 있기로는, '복합적인 상태' 와 그 case 에 대한 처리를 위한 dispatch 펑션을 리턴하는 것으로 알고 있습니다. 결국 쪼개보면 useState() 인 것이고, 그 자체로는 비동기 작업일 수 없습니다.즉, dispatch 자체는, 리액트의 원리?! 상, '상태관리' 이기 때문에 await 를 필요로 하는 비동기 작업이 아닙니다.하지만 dispatch 를 인수로 받는 펑션이라면, async 비동기 처리가 필요할 수도 있겠지요. 그러나 '상태' 를 처리하는 비동기 reducer 는 좋은 선택은 아닐 것 같습니다.가볍게 보자면, 저도 가끔 보험처럼 async, await 를 남발하긴 합니다. VSCode 에 올려주신 코드를 찍어봤더니, 타입 워닝이 없네요. 혼란스러울 만한 토픽인 것 같아요.Tldr; async, await 남발은 취향? 또는 암흑물질? 이다. 끗

react Reducer의 dispatch부분에 궁금증이 있습니다

1개의 답변

#async 목록