리덕스 미들웨어 개념

먼저 redux는 동기적으로 state를 처리하는 라이브러리다.(액션을 던지면 대기없이 바로 발동!)
미들웨어는 프레임워크가 요청을 받고 응답을 만드는 사이에 놓을 수 있는 코드이다.

리액트 프로젝트가 진행되고 있다고 가정하자. 보통 위의 그림처럼 흘러간다. 액션을 디스 패치가 만나 스토어에 던져주기전에 미들웨어를 거쳐서 대기할 api나 액션등은 디스패치에 바로 보내지 않고 대기를 타고 나머지 보내져야할 것들은 디스패치를 통해 스토어 > 리듀서에 던져진다. 이렇게 비동기적으로 코드가 순환하게 된다.

장점

Redux의 장점 중 하나는 상태 관리가 쉬운 것이다. 액션이 보내질때마다 newState가 계산되고 저장된다. state는 스스로 변할 수 없으며 특정 액션의 결과로만 변경된다.
앱에서 일어나는 모든 액션을 이후 계산되는 상태와 묶어서 로깅한다면 에러가 났을때 해당 로그를 들여다보고 어느 액션이 state를 망쳤는지 확인할 수 있다.

redux-thunk

redux-thunk는 미들웨어 중 하나로 리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법이다. 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해준다. 참고로 thunk란, 특정 작업을 나중에 하도록 미루기 위해서 함수형태로 감싼것을 칭한다.
예를들어 10 * 2연산을 하고 싶다. 하면 아래코드로 나타낼수 있다.

const example = 10 * 2

해당 코드가 실행되면 연산이 바로 적용된다. 그럼 이 코드에 함수를 적용시켜보자

function example = () => {
	10 * 2
    };

이렇게 연산식을 함수로 감싸게 되면 코드가 실행되더라도 바로 연산이 시작되는 것이 아니라 함수를 호출했을 때에 연산이 시작된다. 이러한 개념이 thunk라고 할수있다.

적용하기

• 설치하기

npm install redux-thunk

• createStore에서 두번째인자에 applyMiddleware(thunk)넣기

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers/index'

const store = createStore(rootReducer, applyMiddleware(thunk))

만약 리듀서에있는 액션을 바로바로 확인하고 싶으면 devTool이라는 크롬 확장자를 설치해주면 된다.
thunk를 적용하는 순간부터 우리는 async함수드을 미들웨어에서 다뤄줄수있다. 즉, 디스패치할때 액션을 바로 던져주는 것이 아니라 한단계(에를 들면 함수를 하나 더 부르기)를 더 거칠수있다.

위의 사진은 실제 프로젝트에 적용한 코드다. 보이는 것처럼 action 파일을 따로 생성하고 api를 불러들인뒤 디스패치를 통해 액션을 전달할수있다. 이렇게 코드를 구성하면 해당 함수를 재활용할수있다. 필요한곳에 가서 dispatch(파일명.getProducts())만 넣어 주면 위의 코드는 어느 컴포넌트에서든지 쓸수있다.

주의

우리가 리듀서를 여러개를 만들었을 때 합쳐주고 스토어에 전달해 줘야 한다. 이때 사용할수있는게 combineReducers인데 이것은 객체형태로 합쳐서 전달한다.

본인은 리듀서 폴더안에 index.js파일을 생성하여 합쳐주었다. 객체 안에 키를 정해놓고 리듀서를 할당해준 뒤 이 값을 가지고 스토어에 rootReducer을 넣어주면된다. 이때 키값을 넣었으니 이때까지 useSelector해준 값을 수정해줘야 한다. 예를 들면

(state)=>state.productList (X)
(state)=>state.product.productList (O)