[Redux] redux-thunk 설치하고 Store 연결해보기

 

비동기 통신

서버에서 데이터를 가지고 오는 것은 우리가 바로 알 수없고 요청이 들어가면 응답을 해줄 때까지 작업이 끝났는지 알 수 없다 

즉 우리가 파이어스토어에서 데이터를 가지고 오는 것은 비동기로 데이터를 가지고 오는 것이다 

---

미들웨어 

리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구 먼저 설치해야합니다 

 yarn add redux-thunk

• 액션 디스패치와 리듀서 사이에 중간다리 역할을 한다.
• 액션이 일어남-> 미들웨어에서 비돈기 통신 -> 리듀서에서 데이터 수정 

 

redux-thunk는 뭐하는 미들웨어일까?

• 객체대신에 함수를 생성하는 액션 생성 함수를 작성할 수 있다
• 액션 생성 함수 - 액션 객체 반환(딕셔너리{})
• thunk- 함수리턴  -> 특정 액션이 실제로 수행되기 전에 조건을 준다거나 사전 조건을 처리할 수 있도록 한다 

 

미들웨어 추가해보기

import { createStore, combineReducers, applyMiddleware, compose } from "redux";

import thunk from 'redux-thunk';

• applyMiddleware : 미들웨어 묶는 함수
• compose 

modules>configStore.js

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import card from "./modules/Card";
import thunk from "redux-thunk";

//미들웨어들 하나로 묶기
const middlewares = [thunk];
const enhancer = applyMiddleware(...middlewares);

//리듀서 묶기
const rootReducer = combineReducers({ card });

//스토어 생성
const store = createStore(rootReducer, enhancer);

export default store;