React - Redux Middleware , Redux-thunk

Redux Middleware

• 정의

• Redux에서 Middleware는 어찌됐든 함수를 연달아 여러번 리턴하는 하나의 함수입니다.
• Redux에서 Middleware는 주로 비동기 처리를 하기위해 사용합니다. 예를 들면 백엔드 서버에 로그인 API를 연동하거나 회원가입 API를 연동하거나 할 때 사용합니다.

• 참고 사진 / 출처

• 액션이 디스패치 되고나서 현재 처리하고있는 액션을 가져와 리듀서에서 액션으로 상태를 업데이트하기전에 추가적인 작업을 할 수 있습니다.

---

Redux-Thunk

• 정의

• Redux에서 비동기 처리를 할때 많이 사용하는 미들웨어입니다.
• 액션 객체가 아닌 함수 자체를 디스패치 할 수 있습니다.
• 세팅하기 간단하고 사용하기가 비교적 쉬운편입니다.

Redux-thunk 미들웨어 간단하게 만들기

• counter.js

const initialState = {
	number: 0,
};

const counter = (state = initialState, action) => {
	const { type } = action;
	switch (type) {
		case 'UP':
			return {
				...state,
				number: state.number + 2,
			};
		case 'DOWN':
			return {
				...state,
				number: state.number - 2,
			};
		default:
			return state;
	}
};

module.exports = {
	counter,
};

---

• Redux_thunk.js

const logger = ({ dispatch, getState }) => (next) => (action) => {
	console.log('현재 상태', store.getState());
	console.log(action);
  
	if (typeof action === 'function') {
		action(dispatch);
	} else {
    	const result = next(action);
      
    	console.log('다음 상태', store.getState());
    	console.log('\n');
      
    	return result;
	}
};

const middleware = [logger]; // 사용할 미들웨어
const enhancer = compose(applyMiddleware(...middleware)); 
// enhancer : redux의 기능을 도와주는 미들웨어나 데브 툴즈들
// compose : 깊이 중첩된 함수 변환을 길게 늘어진 코드 없이 작성하게 해줍니다.
// applyMiddleware ; 미들웨어를 거쳐가도록 하는 store를 생성할 수 있습니다.
const store = createStore(rootReducer, enhancer);

const Increment = () => (dispatch) => {
	dispatch({ type: 'UP' });
};

const Decrement = () => (dispatch) => {
	dispatch({ type: 'UP' });
};

store.dispatch(Increment());
store.dispatch(Increment());

store.dispatch(Decrement());
store.dispatch(Decrement());

---

• 실행 결과

• store.dispatch(Increment( )) 동작순서

1. Dispatch가 실행되면 Reducer에게 가기전에 Middleware를 먼저 거칩니다. 이때 console.log()로 현재 상태를 출력하고 action도 출력합니다.
2. Middleware에서 Action의 Type이 Function이면 Action을 실행하고 인자값으로 Dispatch를 Increment 함수에게 전달해줍니다.
3. Increment 함수 안에서 다시 Dispatch를 실행하여 Middleware에게 갑니다.
4. 다시 console.log()로 현재상태를 출력하고 Action도 출력합니다.
5. 이번에는 Action이 함수가 아니여서 Result에 Next로 Action을 다음 Middleware에게 보내는데 다음 Middleware가 없으니 Reducer에게 갑니다.
6. Reducer에게 가서 Case가 Type이 UP이니 Number를 + 2 해주고 store.dispatch(Increment())가 종료됩니다.
7. store.dispatch(Decrement( )) 동작순서 또한 같은 방식으로 실행됩니다.