Redux-saga

🐶 redux-saga

• redux-saga는 비동기(=사이드 이펙트)의 최적화를 위한 미들웨어 이다.
• 상태값 변경은 비동기로 발생하는 경우가 많다. API 호출을 통해서 서버로부터 데이터를 받아 오는 것이 대표적인 비동기 코드이다. redux-saga는 액션을 모니터링하다가, 특정 액션이 발생하면 특정 작업(자바스크립트 코드 실행, 다른 액션 디스패치, 상태 조회 등)을 하는 방식으로 사용된다.
• React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 액션을 가로챈다. 중간에 가로챈 액션의 역할을 수행 후, 다시 액션을 발행하여 데이터를 저장하거나 다른 이벤트를 수행시킨다. (saga는 액션에 대한 리스너로서, 액션을 통한 실행/중단/취소 등을 가능케 해주는 것)
  
• 비슷한 라이브러리로는 Redux-Thunk가 있으며, Saga가 Thunk보다 아주 조금 더 러닝 커브가 존재한다. 사실상의 두 개 모두 Redux의 미들웨어로서 같은 역할을 하지만 Redux-Saga에서만 가지고 있는 개념이 있다. 제너레이터와 이펙트 이다. (제너레이터는 Javascript에 포함된 기능이지만 Saga에서는 이를 적극 활용한다.

🪐 제너레이터
Saga는 제너레이터를 이용하여 모든 것을 수행한다. 제너레이터 문법은 자바스크립트 ES6에 포함된 문법이다. next()를 호출하면 {value와 done 프로퍼티}가 포함된 Result객체를 반환한다.

// generator 문법

function* thisIsGenerator() {
  console.log('First Call');
  yield 'First';
 
  console.log('Second Call');
  yield 'Second';

  console.log('Third Call');
}
const thisIsGeneratorObject = thisIsGenerator();

// next()로 호출하여 제너레이터객체 반환( { value:__, done:__ } )
thisIsGeneratorObject.next();       // First Call { value: 'First', done: false }
thisIsGeneratorObject.next();       // Second Call { value: 'Second', done: false }
thisIsGeneratorObject.next();       // Third Call { value: 'Undefined', done: true }

❗ 일반 함수와 다른 점은, 코드 블록이 한 번에 실행되지 않는다.
처음 next()메소드를 호출하면 첫 번째 yield까지 호출되고 일시 중지 된다.
두 번째 next()메소드를 호출해야 두 번째 yield까지 호출되고 또 일시 중지 된다.
마지막으로 next()메소드를 호출해야만, Result객체의 done 프로퍼티 값이 true가 된다.

❗ generator 함수를 만들 때는 function* 키워드를 사용한다.
const generator = generatorFunction() 객체를 만든다. generator 함수를 호출한다고 해서 해당 함수의 코드가 바로 시작되지는 않는다. generator.next() 를 호출해야 코드가 실행되고 yield를 한 값을 반환하고 코드 흐름을 멈춘다. 또다시 generator.next()를 해야 이어진다.

🪐 이펙트
이펙트는 이벤트를 처리할 내용을 담고 있다. 사가를 실행하는 실행부에게 어떠한 동작을 수행해야 할지 알려주는 일반 객체(Plain Object)이다.
Redux-Saga에서는 이러한 이펙트 들을 yield를 이용하여 호출하고 수행된 내용을 다시 돌려 받아 그 다음 액션들을 수행한다. 결국 Redux-Saga는 제너레이터를 통해 이펙트를 수행하는 역할을 한다고 볼 수 있다.
일반적으로 put(), call(), select() 등의 헬퍼 함수를 호출함으로써 해당 이펙트 객체를 생성한다.
대표적인 것들로는 take, call, put 등이 있다.

👉 redux-saga와 제너레이터

리덕스 사가는 자바스크립트의 제너레이터 문법을 이용한다(사가 = 제너레이터를 반환하는 함수).

function 형태의 특수한 함수로 생성된 제너레이터 객체는 { value, done } 속성을 가지고 있는 정말 특수한 객체다.

제너레이터 함수 내부에서 yield라고 하는 키워드로 다음 값, 동작을 제어한다(사가는 yield 표현식을 만날 때마다 실행이 중단).
그래서 while(true)와 같은 무한루프도 제너레이터 함수 내부에서 사용할 수 있다. yield 키워드를 만나면 뒤의 로직이나 값을 전달하고 우선 함수에서 벗어나기 때문이다.
❗ .next()라고 하는 메서드를 받았을 때만 다음 동작을 처리하기 때문에 비동기적인 처리를 제어하기 좋다. (next() 함수를 호출함으로써 사가를 실행할 수 있다. next()함수의 인자로 넘기는 값은 해당 사가의 실행이 중단되어 있는 위치의 yield 표현식 자리를 채워준다)

리덕스 사가가 제너레이터 문법 기반인 것도 비동기적 처리의 인식과 제어를 잘 통제하기 위함이다. 리듀서에 정의된 특정한 액션을 기다리다가 액션이 발생하는 시점에서 yield에 등록된 함수나 로직이 동작하게 하는 것이다. 이런 처리들은 리덕스 사가에 미리 정의된 여러 부수효과(effects) 함수들로 동작하게 된다.

---

🏈 Redux 간단 요약

📌 스토어

• 애플리케이션의 상태를 트리 구조로 관리한다.
• 상태를 바꾸려면 dispatch() 함수를 호출해서 action을 디스패치 한다.
• 리덕스는 스토어가 생성되는 즉시 더미 액션을 디스패치 하여 스토어의 초기 상태를 설정한다.

📌 미들웨어 store => next => dispatch

• 리덕스의 기능을 확장하기 위한 수단, dispatch() 함수를 래핑하는 역할 수행.
• 다음 미들웨어의 dispatch() 함수를 next 인자로 받아서 새로운 dispatch() 함수를 만들어낸다.
• 각 미들웨어는 디스패치 된 액션을 직접 처리하거나 다음 미들웨어의 dispatch() 함수를 호출한다.

📌 스토어 인핸서 storeCreator => storeCreator

• 스토어 생성자를 인자로 받아서 새로운 (개선된) 스토어 생성자를 만들어낸다.
• 일반적으로, createStore() 함수의 마지막 인자로 스토어 인핸서를 넘겨준다.

📌 리덕스 동작 원리

• 리덕스의 스토어는 Context로 구성되어 Provider 컴포넌트의 value props로 전달된다. ( store={store} )
• 해당 Context는 구체적으로 { store, subscription }과 같은 형태를 띠고 있다.
• connect() 함수에 의해 만들어진 컴포넌트나 useSelector() 함수를 사용한 컴포넌트는 액션이 디스패치 된 후 (어떠한 구독 메커니즘에 의해) 강제적으로 리렌더링이 유발된다. 이때 해당 컴포넌트는 Provider 컴포넌트가 제공해주는 리덕스 스토어의 상태를 읽는다.
• 참고로 스토어는 늘 참조값이 같은 가변 객체에 해당하며, Provider 컴포넌트는 중간에 스토어가 다른 걸로 바뀌지 않는 이상 늘 같은 참조값을 가지는 객체를 Context로 구성하도록 구현된다. 따라서 액션을 디스패치 하든 무엇을 하든, Provider 컴포넌트에 의해 자식 컴포넌트들이 전부 리렌더링 될 일은 없다. 즉, 리렌더링은 오로지 구독 메커니즘에 의존하여 발생할 뿐이다.

---

👉 redux-saga 설치 및 기본 세팅

npm i redux-saga

설치 후 미들웨어에 집어넣는다.

👉 redux-saga 코드 구현해보기 (react.js버전)

// store.js 파일 생성

import { createStore, combineReducers, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducer';       // reducer가 정의된 파일 import
import rootSaga from './saga';   // index.js의 rootSaga 파일 import

// 여러 상태값을 변경하는 리듀서들을 하나의 리듀서 함수로 함친다.
const rootReducer = combineReducers({ reducer });

// 리덕스 사가에서 createSagaMiddleware를 불러와서, sagaMiddleware 객체 생성
const sagaMiddleware = createSagaMiddleware();

// store 생성 (sagaMiddleware 객체 연결 ➡ applyMiddleware 함수의 인자로 넘겨주기)
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

// 사가 미들웨어에서 run 메서드에 "통합 사가 함수(rootSaga함수)"를 연결/실행시킨다.
sagaMiddleware.run(rootSaga);

export default store;

// app.js

import withReduxSaga from 'next-redux-saga';
(...)
export default Wrapper.withRedux(withReduxSaga(App));

👉 saga함수 / 부수효과 함수들

• 리덕스 사가의 부수효과 함수가 대부분의 비동기 처리를 한다.

// saga/index.js

import { all, fork } from 'redux-saga/effects';  // 부수효과 함수(all, fork)
import userSaga from './user';

// yield 키워드 뒤에 리덕스 사가의 부수효과 함수가 온다.
// rootSaga 제너레이터 함수 내부에 등록된 yield 키워드에는 all이라고 하는 부수효과 함수가 붙는다. 
// 등록된 함수가 동시에 실행될 수 있도록 처리한다. (rootSaga를 만들어서 하나로 합치는 작업)
export default function* rootSaga() {
  yield all([fork(userSaga)]);
}
// fork 부수효과 함수는 액션을 발생시킨다.

put : dispatch의 saga버전이라고 생각하면 된다. Action을 dispatch한다. ( = store.dispatch()함수)

all : 배열을 받아서, 배열에 들어있는 것들을 한번에 실행한다.

call : 동기적으로 함수를 호출한다.

fork: 비동기적으로 함수를 호출한다.