Redux ObserveStore, Redux 값 변경 감지

2023년 07월 28일
Redux Store에 subscribe를 통하여 특정 값이 변경됨을 확인해야하는 일이 생겼다. 하지만 subscribe를 한다고 한들 어떤 값이 변경되었는지 확인할 방법이 없었다.
 
구글링을 통해 이에 대한 방법을 찾아보던 도중 아래 글을 확인할 수 있었다.
 
 
그리고 해당 글에서 소개한 해결 방안을 아래와 같다.
selector를 만들어 store의 특정 property를 불러올 수 있는 함수를 이용해 이전의 값과 현재의 값을 비교한다는 것이다.
 
function observeStore(store, select, onChange) { let currentState; function handleChange() { let nextState = select(store.getState()); if (nextState !== currentState) { currentState = nextState; onChange(currentState); } } let unsubscribe = store.subscribe(handleChange); handleChange(); return unsubscribe; }
const unsubscribe = observeStore( store, store => store.message.messageList, messageList => setMessageList({ messageList, }), );
 
이 방법을 통해 문제 해결은 가능했지만, messageList를 TypeScript에서 any로 인식하여 타입을 추가해주기로 하였다.
 
// reduce/index.ts // ... export const store = configureStore({ reducer: persistedReducer, middleware: [ReduxThunk], }); export type RootState = ReturnType<typeof store.getState>; //...
import { Store } from 'redux'; import { RootState } from '../reduce'; export const observeStore = <T>( store: Store, selector: (value: RootState) => T, onChange: (value: T) => void, ) => { let currentState: T; function handleChange() { let nextState = selector(store.getState()); if (nextState !== currentState) { currentState = nextState; onChange(currentState); } } let unsubscribe = store.subscribe(handleChange); handleChange(); return unsubscribe; };
 
위의 <T>는 selector에서 선택된 값으로 자동 매핑되기 때문에 따로 Generic을 작성해줄 필요가 없다.
이 후 정상적으로 selector나 onChange의 value에서 타입이 정상적으로 표시되었다.