优化性能

src/components/SegmentCard.tsx

@@ -13,6 +13,7 @@ import SegmentItem from './SegmentItem'
 import {stopPopFunc} from '../utils/util'
 import useSubtitle from '../hooks/useSubtitle'
 import DebateChat from './DebateChat'
+import { RootState } from '../store'
 
 const SummarizeItemOverview = (props: {
   segment: Segment
@@ -25,7 +26,7 @@ const SummarizeItemOverview = (props: {
 
   const {move} = useSubtitle()
   const time = parseStrTimeToSeconds(overviewItem.time)
-  const currentTime = useAppSelector(state => state.env.currentTime)
+  const currentTime = useAppSelector((state: RootState) => state.currentTime.currentTime)
   const isIn = useMemo(() => {
     if (currentTime != null) {
       // check in current segment

src/hooks/useSubtitleService.ts

@@ -4,15 +4,11 @@ import {
   setCurFetched,
   setCurIdx,
   setCurInfo,
-  setCurrentTime,
   setData,
-  setInfos,
   setNoVideo,
   setSegmentFold,
   setSegments,
-  setTitle,
   setTotalHeight,
-  setUrl,
   setTempData,
 } from '../redux/envReducer'
 import {EventBusContext} from '../Router'
@@ -20,6 +16,8 @@ import {EVENT_EXPAND, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE}
 import {useAsyncEffect, useInterval} from 'ahooks'
 import {getModelMaxTokens, getWholeText} from '../utils/bizUtil'
 import { useMessage } from './useMessageService'
+import { setCurrentTime } from '../redux/currentTimeReducer'
+import { RootState } from '../store'
 
 /**
  * Service是单例，类似后端的服务概念
@@ -31,10 +29,10 @@ const useSubtitleService = () => {
   const curFetched = useAppSelector(state => state.env.curFetched)
   const fold = useAppSelector(state => state.env.fold)
   const envReady = useAppSelector(state => state.env.envReady)
-  const envData = useAppSelector(state => state.env.envData)
-  const data = useAppSelector(state => state.env.data)
-  const currentTime = useAppSelector(state => state.env.currentTime)
-  const curIdx = useAppSelector(state => state.env.curIdx)
+  const envData = useAppSelector((state: RootState) => state.env.envData)
+  const data = useAppSelector((state: RootState) => state.env.data)
+  const currentTime = useAppSelector((state: RootState) => state.currentTime.currentTime)
+  const curIdx = useAppSelector((state: RootState) => state.env.curIdx)
   const eventBus = useContext(EventBusContext)
   const needScroll = useAppSelector(state => state.env.needScroll)
   const segments = useAppSelector(state => state.env.segments)

src/redux/currentTimeReducer.ts

@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+interface CurrentTimeState {
+  currentTime?: number
+}
+
+const initialState: CurrentTimeState = {
+  currentTime: undefined
+}
+
+export const slice = createSlice({
+  name: 'currentTime',
+  initialState,
+  reducers: {
+    setCurrentTime: (state, action: PayloadAction<number | undefined>) => {
+      state.currentTime = action.payload
+    }
+  }
+})
+
+export const { setCurrentTime } = slice.actions
+
+export default slice.reducer 

src/redux/envReducer.ts

@@ -23,7 +23,6 @@ interface EnvState {
   totalHeight: number
   curIdx?: number // 从0开始
   needScroll?: boolean
-  currentTime?: number
   infos?: any[]
   curInfo?: any
   curFetched?: boolean
@@ -263,9 +262,6 @@ export const slice = createSlice({
     setNeedScroll: (state, action: PayloadAction<boolean>) => {
       state.needScroll = action.payload
     },
-    setCurrentTime: (state, action: PayloadAction<number | undefined>) => {
-      state.currentTime = action.payload
-    },
     setUrl: (state, action: PayloadAction<string | undefined>) => {
       state.url = action.payload
     },
@@ -337,7 +333,6 @@ export const {
   setCurIdx,
   setEnvData,
   setEnvReady,
-  setCurrentTime,
   setInfos,
   setCurInfo,
   setCurFetched,

src/store.ts

@@ -1,9 +1,11 @@
 import {configureStore} from '@reduxjs/toolkit'
 import envReducer from './redux/envReducer'
+import currentTimeReducer from './redux/currentTimeReducer'
 
 const store = configureStore({
   reducer: {
     env: envReducer,
+    currentTime: currentTimeReducer,
   },
 })