미들웨어1. thunk

목차

1. 미들웨어 추가
2. 미들웨어 작동방식
3. 기본 예제코드
4. 응용 예제코드

 

1. 미들웨어 추가

1. Redux 툴킷 'configureStore' 사용 : API는 저장소 생성동안 자동으로 thunk 미들웨어를 추가함(옵션 설정 필요 없음)
2. applyMiddleware() 메서드 사용: 저장소에 thunk 미들웨어를 수동으로 추가하는 방법(메서드의 인자값으로 미들웨어 전달)

 

 

2. 미들웨어의 작동 방식

 

• 가장 바깥쪽에 있는 함수는 저장소의 dispatch와 getState를 포함하는 store API 객체를 전달받는다.
• 가운데 함수는 체인의 내부에 있는 next 미들웨어 또는 실제 store.dispatch() 메서드를 전달받는다.
• 가장 안쪽에 있는 함수는 각각의 action들과 함께 호출될 것이다.

 

 

3. 기본 예제 코드

const { createStore, compose, applyMiddleware } = require('redux')
const rootReducer = require('./reducers')

const logger = ({dispatch,getState}) => (next) => (action) => {
    console.log(action)
    // { type: 'asdfasdf' }
    // { type: 'asdfasdf' }
    // { type: 'asdfasdf' }
    // dispatch() 메서드 호출한 횟수만큼 console에 aciton 출력
    
    return next(action)
}

const enhancer = compose(applyMiddleware(logger))
const store = createStore(rootReducer,enhancer)

store.dispatch({type:'asdfasdf'})
store.dispatch({type:'asdfasdf'})
store.dispatch({type:'asdfasdf'})


console.log(store.getState())

 

4. 응용 예제 코드

 

실제로 사용 시에는 아래와 같이 middleware라는 배열이 담아서 주로 사용한다고 한다.

const middleware = [thunk]
const enhancer = compose(applyMiddleware(...middleware))

 

 

4-1. 조건문 작성

thunk 함수의 바디에 조건문을 작성하여

전달된 action의 유형에 따라 코드 실행을 다르게 해보자.

 

action이 함수이면 next()를 호출하지 않고

객체면 next를 호출하여 action을 다음 미들웨어로 전달하는 코드이다.

 

 

 

(1) if문으로 작성

const thunk = ({dispatch,getState}) => (next) => (action) => {
    if (typeof action === 'function'){
    	action(dispatch)
        // next 안함
    } else {
        return next(action)
    }
}

 

(2) 삼항연산자 사용

return(
    typeof action === 'function'
    ? action(dispatch)
    : next(action)
)

 

(3) 삼항연산자 사용 및 return 생략

(
    typeof action === 'function'
        ? action(dispatch)
        : next(action)
)

 

 

 

4-2. 로그인 상태와 관련한 코드 예시

const loginAPI = () => async (dispatch) => {
    dispatch({type:ADD_REQUEST})
    try{
        const result = await axios.get(url,{
            credentials:true
        })
        dispatch({type: '로그인 성공', payload:true})
    } catch (e) {
        dispatch({type: '로그인 실패', payload:false})
    }
}

store.dispatch(loginAPI)