Redux-saga 이해

(1) redux-saga 설치

• npm i redux-saga

(2) configureStore

• store/configureStore.js

  ...
  import createSagaMiddleware from "redux-saga";
  import rootSaga from "../sagas";
  ...
  const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const middlewares = [sagaMiddleware, loggerMiddleware];
    const enhancer =
      process.env.NODE_ENV === "production"
        ? compose(applyMiddleware(...middlewares))
        : composeWithDevTools(applyMiddleware(...middlewares));
    const store = createStore(reducer, enhancer);
    store.sagaTask = sagaMiddleware.run(rootSaga);
    return store;
  };
  ``

(2) sagas/index.js

• Effect 불러오기

import { all, call, put, fork } from 'redux-saga/effects'

=> fork는 비동기 액션(함수)
=> call은 동기 액션(함수)
=> all은 배열을 받음, 받은 배열 안에 있는 것들을 한번에 실행
=> take는 첫 번째 인자가 실행될 때까지 기다렸다가 실행이 되면 두 번째 인자인 함수 실행

• rootSaga 만들기

export default function* rootSaga () {
	yield all([
    	fork(watchLogin),
    	fork(watchLogout),
    ])
}

• 액션(함수) 만들기

function* watchLogIn() {
  yield take("LOG_IN_REQUEST", logIn);
}

=> 각각의 이벤트 리스너 역할

• 실행 함수

function logInAPI() {
  return axios.post("/api/login");
}

function* logIn() {
  try {
    const result = yield fork(logInAPI);
    yield put({
      type: "LOG_IN_SUCCESS",
      data: result.data,
    });
  } catch (err) {
    yield put({ type: "LOG_IN_FAILURE", data: err.response.data });
  }
}

=> API 함수에는 * 안 함