reduxのデバッグ・リファクタリング

redux-dev-tools入れた

https://github.com/zalmoxisus/redux-devtools-extension

import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly'
import { createFirestoreInstance, firestoreReducer } from 'redux-firestore'

const initialState = {}
const rootReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer,
})
const store = createStore(rootReducer, initialState, devToolsEnhancer({}))

Command + Shift + Eで起動。便利だ。

react-redux-firebaseのStoreに型がつくようになる。重要。 https://qiita.com/Takepepe/items/6addcb1b0facb8c6ff1f

import 'react-redux'

import { FirebaseReducer, FirestoreReducer } from 'react-redux-firebase'

export interface State {
  firebase: FirebaseReducer.Reducer<
    unknown,
    Record<string, Record<string | number, string | number>>
  >
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  firestore: FirestoreReducer.Reducer
}

declare module 'react-redux' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultRootState extends State {}
}