![]()
안녕하세요. 이번 포스팅에서는 Redux Thunk에 대해 알아보려 합니다. 일반적으로 thunk는 asynchronous한 로직에 사용한다고 알려져 있는데요. Redux state와 dispatch에 접근할 수 있기 때문에 다양하게 활용할 수 있습니다. 이 포스팅을 읽고 난 후에는 아래의 내용들을 얻어가실 수 있습니다. synchronous한 로직에 thunk를 활용하기 여러 action을 위해 thunk에서 dispatch Synchronous complex logic 복잡한 로직은 reducer에서 처리하는 것이 일반적이 케이스이기 합니다. 그렇지만 만약 state에 접근이 필요한 경우 Thunk에서 로직을 작성할 수도 있습니다. const addTodoThunk = createAsyncThunk(..
위의 이미지가 redux 동작원리의 전부입니다. (미들웨어가 빠졌지만 이는 뒤에서 설명하겠습니다.) 설명하기에 앞서 각각의 요소에 대해서 알아보죠. Action 액션은 type 필드를 가진 자바스크립트 객체입니다. 쉽게 생각해서, 어떤 일이 일어났는지를 설명하는 이벤트라고 생각하셔도 무방합니다. 보통, type과 payload 프로퍼티를 가지며 type은 어떤 액션인지를 나타내며, payload는 데이터를 담습니다. 액션은 dispatch를 통해 reducer 함수로 보내지며 기존의 state를 기반으로 새로운 state를 생성합니다.(불변성을 지키는 것이 redux의 원칙이죠.) Dispatch redux에서 dispatch는 액션을 reducer로 전달합니다. 즉, state를 업데이트하는 유일한 방..
