어느날

공부용 react제 web app를 만지면 TypeError: _useSelector is undefined 라는 에러가!



그러나 보통 build는 통과한다

↓바욘↓

[email protected]

[email protected]

[email protected]

[email protected]

이런 코드를 썼다.

// src/containers/App.tsx
const appSelector = createSelector(
  (state: { init: AppState }) => state.init,
  init => init
)

export const AppContainer: React.FC = () => {
  const dispatch = useDispatch()
  const { loading, loaded, error } = useSelector(appSelector)
  const loadDispatcher = (): void => {
    dispatch(initOp())
  }
  return (
    <AppView
      loading={loading}
      loaded={loaded}
      error={error}
      loadDispatcher={loadDispatcher}
    />
  )
}

// src/reducers/index.ts
export default combineReducers({
  app: appReducer,
  todos: todoReducer,
  visibilityFilter: visibilityFilterReducer,
})

// src/reducers/app.ts
export const appReducer = reducerWithInitialState({
  loaded: false,
  loading: false,
  error: null,
} as AppState)
  .cases(...

라고 이렇게 쓰면 일목요연하고(실제는 파일이 헤어져 있기 때문에 적당히 시간을 걸렸다)

appSelector() 에서 init 에서 AppState

combineReducers() 에서 app 에 appReducer 로 결합된다

따라서 위의 오류가 발생한 것 같습니다.

실제로는 useSelector() 의 인수에 더미의 ( () => true 적인) selector 를 사용하는 등 에러 원인을 특정했다.

이상보다 appSelector를 이하와 같이 수정하는 것으로 에러는 해소했다.

// reselect使っている理由は特に無いです(使ってみたかった)
// この程度ならワンライナーで
// const appSelector = ({ app }: { app: AppState }): AppState => app
// の方が分かりやすいですね
const appSelector = createSelector(
  (state: { app: AppState }) => state.app,
  app => app
)

소감

reducer가 없으면 _useSelector()가 정의되지 않은 상태가 될 것입니다.

처음에는 InitState로 정의했지만 이름 적으로 미묘한 것 같아 AppState로 바꿨지만이 수정이 일부 누설되었습니다

selector 주위에서 typescript의 유형 검사가 미묘한 느낌을 받는 것은 예기치 않으므로 조심스럽게 작성해야했다고 반성했습니다.