createAsyncThunk로 돌아왔습니다. 비동기 동작을 제어하기 위해 만들어진 함수다.
액션 타입 문자열과 프로미스를 반환하는 콜백 함수를 인자로 받아서 주어진 액션 타입을 접두어로 사용하는 프로미스 생명 주기 기반의 액션 타입을 생성합니다.
그냥 쉽게 말하면 비동기 동작을 컨트롤 하려고 쓴다.
전편에서 createAsyncThunk 공부를 했지만 너무 대충 공부했더니 막상 쓰려니까 헤맸다.
실제로 회사에서 로봇 GUI에서 맵 데이터를 받아오고 세팅을 하는 동작에 thunk가 쓰이는데 적용을 해봤다.
데이터는 이미 로봇에 있음!
순서대로 구현해봄 (맞는진 모른다.)
1. Provider로 감싸기.
index.js 에서 App컴포넌트를 provider로 감싸고 Props를 준다. ->store
이거 굳이 적는 이유는 구현을 다 해놓고 콘솔 창열어보니까 안되길래 멍때리다가 provider를 까먹어서 5분정도 멘붕이었기 때문이다 ㅋ.
2. createAsync 설정
용어 설명
initialState = 상태 초기 값.
엥 더 설명할게 없네.
3. Slice 설정
용어 설명
builder.addCase
콜백 함수 인자로 주어지는 builder객체는 addCase, addMatcher, addDefaultCase라는 메서드를 제공합니다. 그리고 각 함수에서 액션을 리듀서에서 어떻게 처리할지를 정의할 수 있다.
- addCase : 액션 타입과 맵핑되는 케이스 리듀서를 추가하여 액션을 처리합니다.
- addMatcher : 새로 들어오는 모든 액션에 대해서 주어진 패턴과 일치하는지 확인하고 리듀서를 실행합니다.
- addDefaultCase(render) : 그 어떤 케이스 리듀서나 매치 리듀서도 실행되지 않았다면, 기본 케이스 리듀서가 실행됩니다.
extraReducers
createSlice가 생성한 액션 타입 외 다른 액션 타입에 응답할 수 있도록 합니다. 슬라이스 리듀서에 맵핑된 내부 액션 타입이 아니라, 외부의 액션을 참조하려는 의도를 가지고 있습니다. -> 비동기 액션을 생성하는 createAsyncThunk 함수와의 조화를 생각해 볼 수 있다.
비동기 동작에서 어떤 로직을 실행해야 하는지 능집도 높게 작정할 수 있다 .
4. Store ?
store.js 파일에 따로 만들어줬다.
5. dispatch
끝!!
