스파르타 코딩클럽 - 리액트 5주차(1)

1. 리덕스에서 FireStore 데이터 가지고 놀기(1)

1-1. firestore 데이터를 리덕스 스토어에 넣으려면? (미들웨어 설치!)

우리가 firestore에서 데이터를 가져올 때 비동기 통신을 한다. 리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구를 설치한다.

1-2. 미들웨어란?

리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리]하던 과정 기억하는가? 즉, 미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 것이다. 다시말해 [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 된다.

1-3. 설치방법?

yarn add redux-thunk

1-4. redux-thunk은 뭐하는 미들웨어일까?

redux-thunk은 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해준다. 그것이 필요한 이유는 리덕스는 기본적으로는 액션 객체를 디스패치한다. → 즉, 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있다.

configStore.js
미들웨어 추가!

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import bucket from "./modules/bucket";
import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

const middlewares = [thunk];

const enhancer = applyMiddleware(...middlewares);
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);

export default store;