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에서 타입이 정상적으로 표시되었다.