Redux Thunk 미들웨어
위 코드를 풀어서 쓰면 아래로 바꿀 수 있다.
즉,
Redux Thunk는 Redux의 미들웨어 중 하나로서, 비동기 작업을 더 편리하게 관리할 수 있게 해주는 도구입니다. Redux Thunk를 사용하면 action creators에서 thunk라고 부르는 특별한 형태의 함수를 반환할 수 있게 됩니다.
일반적인 Redux action creator는 action 객체를 반환합니다. 그러나 Redux Thunk를 사용하면, action creator는 'thunk'라는 함수를 반환할 수 있습니다. 이 'thunk' 함수는 dispatch와 getState라는 두 개의 인자를 받습니다.
이러한 패턴은 특히 API 요청과 같은 비동기 작업을 수행할 때 유용합니다. API 요청을 시작할 때, 요청이 성공했을 때, 요청이 실패했을 때 등 다양한 시점에서 action을 dispatch할 수 있습니다.
즉, Redux Thunk는 비동기 로직을 action creator 안에서 숨기는 방법을 제공함으로써, 이러한 복잡성을 Redux store 밖으로 추출하고, 비동기 로직을 더 쉽게 테스트하고 재사용할 수 있게 도와줍니다.
signUp(userData)의 반환값은 사실상 JavaScript의 Promise입니다. 이 Promise는 Redux Thunk 미들웨어에 의해 처리되는 함수를 감싸고 있습니다. 이 함수는 dispatch 함수를 인자로 받아, 비동기 처리가 완료되면 결과를 Redux store에 dispatch하는 역할을 합니다.
이 함수는 dispatch 함수를 인자로 받아 실행됩니다. 비동기 작업인 axios.post가 완료되면 결과 데이터를 포함하는 action 객체를 dispatch합니다. 이렇게 하여 비동기 작업의 결과를 Redux store에 반영할 수 있게 됩니다.
이것이 signUp(userData)가 반환하는 값이며, 이것이 Redux Thunk 미들웨어에서 처리되어야 하는 Promise입니다.
따라서 dispatch(signUp(userData));는 signUp이 반환하는 함수를 Redux Thunk 미들웨어에 전달하며, 그 함수는 비동기 요청을 처리하고, 결과에 따라 적절한 액션을 다시 dispatch합니다. 이것은 Redux의 상태를 변경하게 됩니다.
dispatch(signUp(userData))에서 signUp(userData)의 결과는 사실상 Redux Thunk 미들웨어를 통해 수행되는 비동기 작업입니다. signUp(userData)는 함수를 반환하며, 이 함수는 디스패치를 인자로 받습니다. 따라서 dispatch(signUp(userData))를 호출하면, signUp(userData)가 반환하는 함수가 실행되고 그 함수의 인자로 Redux의 dispatch 함수가 전달됩니다.
이렇게 해서 signUp(userData)가 반환하는 함수 내부에서 API 호출 후에 결과를 Redux 스토어에 디스패치하는 것이 가능해집니다.
즉, dispatch 함수는 Redux 스토어를 업데이트하는 동작을 트리거하는데 사용되며, 이 경우에는 비동기 작업의 결과를 스토어에 저장하는 역할을 합니다. 그리고 Redux Thunk 미들웨어는 이러한 비동기 작업을 가능하게 해주는 역할을 합니다.
이해를 돕기 위해 아래의 코드를 보겠습니다.
위 코드에서 signUp(userData)는 Thunk 함수를 반환하며, 이를 dispatch 함수의 인자로 전달하면, Thunk 미들웨어가 그 함수를 실행하고 그 안에 포함된 비동기 작업을 처리합니다.
signUp(userData)가 반환하는 함수가 dispatch를 인자로 받으면 signUp(userData)(dispatch) 이렇게 적어줘야하는게 맞지 않나?
일반적인 JavaScript 함수 호출에서는 그렇게 됩니다. 하지만 Redux와 그의 미들웨어인 Redux Thunk는 약간 다르게 작동합니다. Redux Thunk 미들웨어는 dispatch 함수를 자동으로 첫 번째 인자로 전달합니다.
따라서, 우리가 Thunk 함수를 반환하는 action creator를 dispatch 함수의 인자로 전달하면, Redux Thunk 미들웨어는 그 Thunk 함수를 실행하고 dispatch 함수를 첫 번째 인자로 자동으로 전달합니다.
즉, 우리가 직접 signUp(userData)(dispatch)와 같이 쓰지 않아도, Redux Thunk 미들웨어가 내부적으로 이를 처리해줍니다.
이는 미들웨어의 역할 중 하나로, 미들웨어는 액션을 dispatch 할 때 특정 작업을 수행하도록 설계되어 있습니다. Redux Thunk 미들웨어의 경우, 그 특정 작업이 비동기 작업의 관리 및 dispatch 함수의 전달입니다.