Enforced usage of typed hooks with linter

[agusterodin]

Neat idea that we use in our company monorepo. Enforced usage of typed hooks with linter:

.eslintrc.json

{
  "extends": "next/core-web-vitals",
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "react-redux",
            "importNames": ["useDispatch", "useSelector"],
            "message": "Please use the typed hooks from 'state' instead"
          },
          {
            "name": "@reduxjs/toolkit",
            "importNames": ["createAsyncThunk"],
            "message": "Please use the typed version from 'state' instead"
          }
        ]
      }
    ]
  },
  "plugins": ["@typescript-eslint"]
}

state/index.ts

import { combineReducers } from 'redux'
import { HYDRATE, createWrapper } from 'next-redux-wrapper'
import { setAutoFreeze as setImmerAutoFreeze } from 'immer'
import { configureStore, createAsyncThunk as createAsyncThunkCore } from '@reduxjs/toolkit' // eslint-disable-line
import { useDispatch as useDispatchCore, useSelector as useSelectorCore, TypedUseSelectorHook } from 'react-redux' // eslint-disable-line
import { setupListeners } from '@reduxjs/toolkit/dist/query'
import { api, authorizationErrorMiddleware } from 'server'

const rootReducer = combineReducers({})

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state,
      ...action.payload
    }
    return rootReducer(nextState, action)
  }
  else {
    return rootReducer(state, action)
  }
}

export const initStore = () => {
  const store = configureStore({
    reducer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(api.middleware, authorizationErrorMiddleware),
    devTools: process.env.NODE_ENV === 'production' ? { shouldRecordChanges: false } : true
  })
  setupListeners(store.dispatch)
  return store
}

// Other

export type State = ReturnType<typeof rootReducer>
export type Dispatch = ReturnType<typeof initStore>['dispatch']

export const useDispatch: () => Dispatch = useDispatchCore
export const useSelector: TypedUseSelectorHook<State> = useSelectorCore
export const createAsyncThunk = createAsyncThunkCore.withTypes<{
  state: State
  dispatch: Dispatch
}>()

export const wrapper = createWrapper(initStore)

Error if not used properly

No error when used properly

[markerikson]

Yeah, actually, we do that in the Replay codebase as well!

see our eslintrc.json file:

  "overrides": [
    {
      "files": ["{src,packages,pages}/**/*.{js,jsx,ts,tsx}"],
      "rules": {
        "no-restricted-imports": [
          "error",
          {
            "paths": [
              {
                "name": "react-redux",
                "importNames": ["useDispatch", "useSelector"],
                "message": "Please import 'useAppDispatch/useAppSelector' from 'ui/setup/hooks' instead."
              },
            ]
          }
        ],