nsgm-cli/client/redux/store.ts

A CLI tool to run Next/Style-components and Graphql/Mysql fullstack project

import { useMemo } from 'react'
import { combineReducers } from 'redux'
import { configureStore, type EnhancedStore } from '@reduxjs/toolkit'
import reducers from './reducers'

let store: EnhancedStore | undefined

const reducersKeysLen = Object.keys(reducers).length

let combineReducer: any = () => ({})

if (reducersKeysLen > 0) {
  combineReducer = combineReducers({ ...reducers })
}

export type RootState = ReturnType<typeof combineReducer>

// 创建一个临时 store 实例来获取正确的 dispatch 类型
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const tempStore = configureStore({
  reducer: combineReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
      },
    }),
})

export type AppDispatch = typeof tempStore.dispatch

function initStore(initialState?: any): EnhancedStore {
  return configureStore({
    reducer: combineReducer,
    preloadedState: initialState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
        },
      }),
  })
}

export const initializeStore = (preloadedState?: any): EnhancedStore => {
  let _store = store ?? initStore(preloadedState)

  if (preloadedState && store) {
    _store = initStore({
      ...store.getState(),
      ...preloadedState,
    })
    store = undefined
  }

  if (typeof window === 'undefined') return _store

  if (!store) store = _store

  return _store
}

export function useStore(initialState?: any): EnhancedStore {
  const store = useMemo(() => initializeStore(initialState), [initialState])
  return store
}