[React] redux-saga 시작하기! 기본적인 effects 활용

💥 redux-saga

• 비동기 작업을 하는 미들웨어가 필요할 때 사용한다.
• 특정 액션이 발생했을 때 상태 값이나 응답 상태 등에 따라 다른 액션을 디스패치 하거나 추가적인 로직을 적용 해야될 때 사용할 수 있다.
• api요청, 요청 실패 시 재요청 등의 리덕스와 관계없는 코드를 미들웨어로 실행시킬 수 있다.
  yarn add redux-saga 또는 npm install redux-saga

 

❗ generator 함수

• generator 함수는 일반 함수와는 다르게 함수 코드 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 함수이다.
• yield는 중단점을 만든다.
• yield 뒤에 값이 있으면 그걸 객체의 value에 담아 return하고 멈춘다.
• 아래와 같이 function*로 선언한다.
  

  

• next()를 통해서 다음 중단점까지 실행시킬 수 있다.

 

❗ 자주 쓰이는 effects

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

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

• effect는 yield뒤에 오는 함수로, 각자의 역할을 수행한다.
• take
  해당 액션이 dispatch되면 제너레이터를 next한다.

  function* watchLogIn() {
 	 yield take('LOG_IN', logIn); // 'LOG_IN'이 들어오면 logIn 함수 실행
  }

• put
  특정 action을 dispatch 시켜준다.
  파라미터로는 액션 객체가 들어간다.

    yield put({
        type: 'LOG_IN_SUCCESS',
        data: result.data
    });

• takeEvery
  모든 해당 액션을 처리한다.
• takeLatest
  가장 마지막으로 dispatch된 액션을 처리한다.
• all
  여러 사가를 합쳐주는 역할을 한다. all은 파라미터로 배열을 받는데, 배열 내에 있는 것을 모두 실행시킨다.
• call
  함수를 동기적으로 실행시켜준다. 첫번째 파라미터는 함수, 두번째 파라미터는 해당 함수에 넣을 인수이다.

   yield call(request, action.payload)

• fork
  call과 파라미터가 같고 마찬가지로 함수를 실행시키는 역할이다. 그러나 비동기이기 때문에 결과값을 기다려 주지 않는다.

    export default function* rootSaga() {
    	yield all([
    		fork(함수),
    		fork(함수)
    	])
    }

 

💥 기초 구현 코드

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

function logInAPI(data) {
    return axios.post('url/api/login', data);
}

function* logIn(action) {
    try {
        const result = yield call(logInAPI, action.data);
				// logInAPI에 전달할 파라미터를 call의 두번째 파리미터로 지정해준다. 
				// action이 login에 대한 액션이니까 action.data에 내가 넣어둔 데이터가 들어있다.
        yield put({
            type: 'LOG_IN_SUCCESS',
            data: result.data
        });
    } catch (err) {
        yield put({
            type: 'LOG_IN_FAILURE',
            data: err.response.data
        });
    }
}

function* watchLogIn() {
    yield take('LOG_IN', logIn); // login에 대한 액션 자체가 logIn에 매개변수로 전달된다.
}


// (a) 액션을 발생시키고 싶은 시점에서 아래와 같이 dispatch! 
dispatch(login({data: user}));

• 예를 들어 내가 LOG_IN 액션에 대한 액션 생성함수를 login으로 만들었을 때
• 해당 액션을 발생시키고 싶은 시점에서 (a) 같이 dispatch하면
• watchLogIn함수 내의 take에서 받아서 logIn generator함수를 실행시킨다.
• 이때, logIn의 파라미터 action으로는 내가 dispatch한 액션 자체가 들어온다. (즉 action.data는 내가 넣은 user)
• 그 값으로 axios요청을 하고 성공하면 LOG_IN_SUCCESS put
• 실패하면 LOG_IN_FAILURE을 put한다.
• 각각 LOG_IN_SUCCESS와 LOG_IN_FAILURE에 대해서 성공 시 state를 바꾸는 등의 코드를 리듀서로 작성해야 한다.