Redux middleware

redux

example code

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  reducers,
  compose(
    applyMiddleware(sagaMiddleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f,
  ),
  
  // 여기서는 compose를 사용해서, 
  // 저장소를  applyMiddleware와 window.devToolsExtension 패키지의
  // 몇몇 개발툴로 강화하는 방법을 사용
  
);

sagaMiddleware.run(rootSaga);

---

middleware

: img

• 위 그림에서 미들웨어는 action이 어떠한 데이터를 dispatch하는 과정에서, (reducer로) reducer에 도달하기 전, 어떠한 로직이 끼어들 수 있는 틈을 만든다.
• 따라서, 미들웨어는 외부에서 생성된 action이 reducer에 도달하기 전에 가장 먼저 수신하여 시스템에 알맞게 특정 작업들을 미리 처리할 수 있도록 도와준다.
• (미들웨어가 없다면, action creactor 또는 dispatch를 몽키패치해서 처리해야 -> 까다로움) 따라서, 미들웨어를 사용해서, 생성될 수 있는 문제들을 쉽게 처리하고, 더욱 강력해진 dispatch함수를 생성한다.

---

createStore

- createStore (reducer, [preloadedState], [enhancer])

: 앱의 상태 트리 전체를 보관하는 redux 저장소를 만듦 (앱 내에는 단 하나의 저장소만 존재함)

reducer (f) : 주어진 현재 상태 트리와 액션에서 다음 상태 트리를 반환하는 리듀싱 함수
[preloadedState] : 초기 상태(state)
[enhancer] : 저장소 enhancer / redux와 함께 제공되는 인핸서는 applyMiddleware()만 존재함
(참고로, enhancer는 어떤 것들의 상호작용을 통해 better result를 내는 그런 의미)

return : Store (앱의 전체 state를 가지고 있는 객체) (rf. 이 객체의 상태를 바꾸는 유일한 방법은 액션을 dispatch하는 방법 뿐))

---

compose

- compose(...functions)

: 여러 개의 enhancer를 저장하기 위함

미들웨어를 분석하기 위해서는 함수 중첩(compose)를 이해해야 한다. redux에서 compose는 고차 함수를 구현할 수 있도록 도와주는 역할을 한다.

f, g, h라는 함수가 있고, f와 g는 앞선 함수의 반환 값을 인자로 받도록 정의되어 있을 때, 
아래와 같은 형태를 생각해볼 수 있다.

   x = h(...args)
   y = g(x) = g(h(...args))
   z = f(y) = f(g(x)) = f(g(h(...args)))

최종적으로 (...args)를 가지고 f, g, h를 적절히 조합하여 z 결과값을 얻어야 할때,
f(y)를 쉽게 표현하기 위해 compose라는 함수를 사용한다.

compose(f, g, h) = (...args) => f(g(h(...args)))

함수를 오른쪽에서 왼쪽으로 조합한다.

여러 저장소 enhancer들을 순차적으로 적용하기 위해 사용한다.

...function (arguments) : 조합시킬 함수들
각각의 함수는 하나의 인자를 받아야 한다.
함수의 반환값은 왼쪽에 있는 함수의 인수

return : 오른쪽에서 왼쪽으로 조합된 최종 함수

---

combineReducers

---

applyMiddleware

• applyMiddleware(...middleware)

: redux에 임의의 기능을 넣어 확장하는 방법 중 하나로 applyMiddleware또한 미들웨어이다.

미들웨어 저장소의 dispatch 메서드를 감싸준다.

---

store

: 앱의 전체 상태 트리를 가지고 있는 저장소 (객체) 로 이 store 내부의 state 상태를 바꾸는 유일한 방법은 이 곳에 action을 보내는 방법 뿐

store를 생성하기 위해서는 루트 리듀싱 함수를 createStore에 전달한다

store의 메서드들

1. getState()
2. dispatch(action)
3. subscribe(listener)
4. replaceReducer(nextReducer)

1. getState()