github.com/pingcap/tiflow@v0.0.0-20240520035814-5bf52d54e205/dm/ui/src/models/index.ts (about)

     1  import {
     2    configureStore,
     3    Middleware,
     4    isRejectedWithValue,
     5  } from '@reduxjs/toolkit'
     6  import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
     7  
     8  import { api } from '~/models/api'
     9  import { globalSlice } from '~/models/global'
    10  import { message } from '~/uikit/message'
    11  
    12  const rtkQueryErrorLogger: Middleware = () => next => action => {
    13    if (isRejectedWithValue(action)) {
    14      console.error('RTKQ error caught: ', action)
    15      // insert your own error handler here
    16      message.error({
    17        content:
    18          action.payload?.data?.error_msg ??
    19          action.payload?.data?.error ??
    20          'Oops, somthing went wrong',
    21        duration: 15,
    22      })
    23    }
    24  
    25    return next(action)
    26  }
    27  
    28  export const store = configureStore({
    29    reducer: {
    30      [api.reducerPath]: api.reducer,
    31      globals: globalSlice.reducer,
    32    },
    33    middleware: getDefaultMiddleware => {
    34      const middlewares = getDefaultMiddleware({
    35        serializableCheck: false,
    36      })
    37  
    38      middlewares.push(api.middleware, rtkQueryErrorLogger)
    39  
    40      return middlewares
    41    },
    42  
    43    devTools: import.meta.env.DEV,
    44  })
    45  
    46  export type RootState = ReturnType<typeof store.getState>
    47  
    48  export type AppDispatch = typeof store.dispatch
    49  
    50  export const useAppDispatch = () => useDispatch<AppDispatch>()
    51  
    52  export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
    53  
    54  export const actions = {
    55    ...globalSlice.actions,
    56  }