평소에 Redux와 같은 전역상태관리 라이브러리를 사용하면서 해당 라이브러리가 어떻게 전역상태관리를 하는지에 대해서 깊게 생각해 본적이 없습니다. 이번 wanted 프리온보딩에서 관련 로직을 설명듣고, 이를 정리하기 위해서
redux의 createStore의 코드를 다시 한번 분석해 보았습니다.
https://github.com/deminoth/redux/blob/master/src/createStore.ts
redux/src/createStore.ts at master · deminoth/redux
자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. Contribute to deminoth/redux development by creating an account on GitHub.
github.com
리덕스는 클로저를 통해서 전역 변수처럼 상태관리를 합니다.
자바스크립트를 공부하면 자주 접하게 되는 내용입니다.
1. 클로저란 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다.
2. 클로저는 정보 은닉을 위해서 사용된다.
redux에서 상태관리를 위한 store를 만들 때 createStore를 사용합니다. 관련 코드는 상위 url의 ( 42~384번째 줄까지)
우선 createStore의 매개변수와 타입들이 나오고
export function createStore<
S,
A extends Action,
Ext extends {} = {},
StateExt extends {} = {}
>(
reducer: Reducer<S, A>,
preloadedState?: PreloadedState<S> | StoreEnhancer<Ext, StateExt>,
enhancer?: StoreEnhancer<Ext, StateExt>
): Store<S, A, StateExt> & Ext {
135줄에 let으로 선언된 변수들이 나옵니다.
let currentReducer = reducer
let currentState = preloadedState as S
let currentListeners: Map<number, ListenerCallback> | null = new Map()
let nextListeners = currentListeners
let listenerIdCounter = 0
let isDispatching = false
이때 createStore는 함수이고, 내부에 let으로 된 변수가 있다는 사실을 기억하면 됩니다.
createStore내부에서는 메서드를 통해서 해당 변수들을 이용 및 수정합니다.
function dispatch(action: A) {
if (!isPlainObject(action)) {
throw new Error(
`Actions must be plain objects. Instead, the actual type was: '${kindOf(
action
)}'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.`
)
}
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.'
)
}
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
const listeners = (currentListeners = nextListeners)
listeners.forEach(listener => {
listener()
})
return action
}
이때 클로저에 의해서 비록 createStore의 실행이 끝났지만, 우리는 렉시컬 환경에 남아있는 변수들에 접근할 수 있습니다.
일반적인 전역변수를 사용할 경우 해당 변수가 오염될 수 있지만, 우리는 은닉화된 createStore의 렉시컬 환경속의 변수들을 관련 메서드를 통해 사용하기 때문에 좀 더 안전하게 사용할 수 있습니다.
'프론트엔드 > 상태관리' 카테고리의 다른 글
| redux - createStore 코어만 구현하기 (0) | 2024.11.11 |
|---|---|
| Proxy를 활용한 Valtio의 전역상태관리 (feat. proxy-compare라이브러리) (5) | 2024.09.23 |
| React에서 Zustand 리렌더링 최적화하기 (0) | 2024.09.17 |
