Redux 비동기 작업 처리 / Redux 아키텍처 - 21.05.18

18 May 2021 in Dev on Redux

redux-thunk : redux 비동기 작업 처리를 위한 미들웨어.

비동기 액션 생산자는, 상태에 따라 동기 액션 생산자를 호출 (여기서 말하는 상태는 비동기 요청 시작/완료/실패 등을 포함할 수 있습니다.)

비동기 액션 생산자는 리듀서로 연결되지 않고, 직접 dispatcher를 통해 스토어로 새로운 상태를 보내줍니다. thunk 함수를 dispatch 할, thunk 함수에서 dispatch와 getState를 파라미터로 받아와주어야 합니다.

Redux 아키텍처

동기적 Redux 아키텍처

Redux

view

// Action 생성자 호출
addToDo(text)

Action 생성자

// Action 생성자 함수
function addToDo(text) {
    // Action 정의
    const action = {
        type: ADD_TODO,
        text
    }
    
    // dispatcher 호출
    disPatch(action)
}

Dispatcher 호출 (컴포넌트 안에서)

disPatch(action)

Reducer

function todoApp(state, action) {
    // action의 type에 따라 분기 (if 문으로 대체 가능)
    switch (action.type) {
        case ADD_TODO:
            // 객체를 합쳐서 새로운 객체 생성
            // Object.assign(감싸줄 객체, 현재 상태, 변경 사항)
            return Object.assign({}, state, todos: [
                ...state.todos,
                {
                    text: action.text,
                    completed: false;
                }
            ])
    }
}

비동기적 Redux 아키텍처

비동기 Action 생성자 호출

thunkedSearch(queryObj)

동기 Action 생성자 호출

setSearchVideos(items)