React[리액트 심화] 비동기통신 미들웨어 thunk (경유지 역할)

Thunk

- 리덕스 환경에서 비동기통신에서 사용되는 미들웨어

- 데이터베이스에서 데이터를 받아와서 상태까지 변경할 수 있는 것

1. 리덕스 미들웨어

- 액션 > 미들웨어 > 리듀서 > 스토어

- 리덕스 : dispatch를 하면 action이 리듀서로 전달 & 리듀서는 새로운 state 반환

- 미들웨어 : 위의 과정 사이에 (middle) 하고싶은 작업 가능

 

- 카운터 프로그램 : (+1 실행) ---[ 3초 기다리기 = 미들웨어] --- (+1 구현) 

- 사용 이유: 서버와의 통신(get,post)을 위해서 사용이 대부

2. 리덕스 thunk 

- thunk 사용 : 우리가 dispatch할때 객체가 아닌 함수를 dispatch가능

 

1) thunk 함수 구현 : createAsyncThunk (reduxToolkit 내장 API)

2) createSlice의 reducers > extraReducer에 thunk등록

3) dispatch (함수 넣을 것)

4) 테스트 & 기능확인(network+devTools) 

5) store의 값을 조회 + 화면에 렌더링

 

3. Thunk 개념도

 

▶ 리덕스 thunk의 "3. 리듀서의 액션 객체에 payload2 반환'

=> 리덕스 thunk의 payload2 = 리듀서의 action.payload 

 

 

 

4.  VS code

(1) 리액트 컴포넌트 : 상태변경 요청 

import { useDispatch } from 'react-redux';

import { __getLetters } from 'redux/modules/letters';

export default function Home() {

    const dispatch = useDispatch();

    useEffect(() => {

        dispatch(__getLetters());

    }, [dispatch]);

▶ action Creator  = __getLetters

▶ payload = 없음

 

(2) 리덕스 thunk

export const __getLetters = createAsyncThunk('getLetters', async (payload, thunkAPI) => {

    try {

        const response = await lettersAPI.get(`/letters?_sort=createAt&_order=desc`);

        console.log('response_get', response.data);

        return thunkAPI.fulfillWithValue(response.data);

    } catch (error) {

        console.log('error', error);

        return thunkAPI.rejectWithValue(error);

    }

});

▶ return 값 = thunkAPI.fulfillWithValue(response.data)= 리듀서의 aciton.payload

 

(3) 리듀서

const lettersSlice = createSlice({

    name: 'letters',

    initialState,

    extraReducers: {

        [__getLetters.pending]: (state, action) => {

            state.isLoading = true;

            state.isError = false;

        },

        [__getLetters.fulfilled]: (state, action) => {

            state.isLoading = false;

            state.isError = false;

            state.letters = action.payload;

        },

        [__getLetters.rejected]: (state, action) => {

            state.isLoading = false;

            state.isError = true;

            state.error = action.payload;

        },

}

▶extraReducer 사용

▶pending (진행중) / fulfilled (성공) / reject (실패)

 

 

끝.