[React] Redux-saga 이해하기

Redux-saga란 무엇인가?

Redux의 미들웨어 라이브러리 중 한 개이다.
Redux-thunk와 Redux-saga가 대표적인데, Redux-thunk의 경우 saga에 대비해 쉬운 코드와 높은 생산성이 있지만, 태생적인 한계 때문에 복잡한 비동기 처리가 어렵다.
Saga의 경우는 제네레이터라는 문법 때문에 처음 접하는 이들을 당혹하게 하지만, thunk에 비해서 더 복잡한 비동기 처리를 할 수 있다는 점을 들 수 있다.
아 그리고 사용량은 상단의 npm-trends를 참고하면 thunk가 3배 정도 사용량이 많다.

Redux-saga 활용하기

1.watch함수 만들기

function* watchSignUp() {
    yield takeLatest(SIGN_UP_REQUEST, signUp);
}

처음에는 action을 감지하기 위한 watchSignup함수를 생성한다.
마지막 요청만을 받기 위해 takeLatest함수를 이용해 인자로 액션과, 사용할 함수를 입력한다.

2.signUp함수 만들기

function* signUp(action) {
    try {
       
        const result = yield call(signUpAPI);
        여기서 put은 일종의 dispatch와 같다. reducer로 값을 전달해준다.
        yield put({
            type: SIGN_UP_SUCCESS,
            data: result.data,
        });
    } catch (err) {
        console.log('SAGA SIGN UP ERR', err);
        yield put({
            type: SIGN_UP_FAILURE,
            error: err,
        });
    }
}

call이라는 함수를 활용해 signUpAPI를 호출한다. call은 동기적이고, fork는 비동기 형식이다.
첫 번째 파라미터에는 함수, 나머지 파라미터에는 해당 함수에 넣을 인자값을 넣어준다.
이후 try-catch문을 활용해서 에러를 핸들링 하게 된다

3.call한 signUpAPI함수 생성하기

function signUpAPI() {
    return axios.post('http://localhost:8080/api/signup');
}

필요한 데이터를 axios로 post방식으로 호출한다.
주의사항은 이 함수는 제네레이터 *를 사용할 필요가 없다.

4. export 해주기

export default function* userSaga() {
    yield all(
        [fork(watchLogIn), fork(watchLogOut), fork(watchSignUp)]
    );
}

여기서 all함수는 많은 함수는 한 번에 호출하게 해주는 API이다. 그리고 위에서 설명한 fork를 활용해 비동기적으로 watch함수를들 넣어주어, 실행하면 해당 이벤트가 발생했을 때만 실행되도록 설정한다.

5. root사가로 여러 개의 사가 묶어주기

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

import userSaga from './user.jsx'
import catSaga from './cat.jsx'
import postSaga from './post.jsx'

export default function* rootSaga() {
	yield all([
		fork(userSaga),
		fork(catSaga),
		fork(postSaga)
	])
}

위와 거의 흡사하다.
all함수로 묶고, fork에다가 해당 saga를 넣어준다.

6. store에 saga-Middleware 만들기

import { applyMiddleware, createStore, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootReducer from '../reducers';
import rootSaga from '../sagas';

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(rootReducer);
	sagaMiddleware.run(rootSaga);
    
    return store;
};

export default configureStore;

createSagaMiddleware를 활용해서 sagaMiddleware를 만들어주면 된다.
그리고 sagaMiddleware.run(rootSaga) 를 작성해서 saga를 실행해준다.

정리하기

처음에는 이게 무슨 소리인가 데이터가 이리 갔다 저리 갔다 하는 탓에 정말 힘들었다.
그래도 계속 코드를 바라보고 콘솔로그를 찍어서 어떻게 처리되는지 확인하니 이제야 개념이 어느정도 정립되었다.
물론 Redux도 러닝커브가 꽤 높고 Redux-saga도 꽤 높지만 계속 츄라이 하다 보면 내 것이 되어 능숙하게 활용할 수 있겠지 라는 마음으로 공부하면 될 거 같다.