perf: remove playlist playhistory from reducer state

src/components/Layout/Footer/PlayOperations/index.tsx

@@ -2,15 +2,18 @@ import React from 'react'
 import { Icon } from '@blueprintjs/core'
 
 import { PlayMusicStateContext, PlayMusicDispatchContext, AudioContext, ACTIONS } from 'reducers/playMusic'
+import { playList as playListLocalStorage } from 'helpers/play'
 import styles from './style.module.css'
 
-const { useContext } = React
+const { useContext, useMemo } = React
 
 const PlayOperations = () => {
   const audioInfo = useContext(AudioContext)
   const state = useContext(PlayMusicStateContext)
   const dispatch = useContext(PlayMusicDispatchContext)
-  const { musicId, playList } = state
+  const { musicId } = state
+
+  const playList = useMemo(() => playListLocalStorage.getItem(), [musicId])
 
   const togglePlayStatus = () => {
     if (audioInfo.state?.paused) {

src/components/Layout/Footer/PlayRecord/PlayHistory/index.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 
 import List from '../List'
 import { IMyMusic } from 'apis/types/business'
-import { PlayMusicStateContext, PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { playHistory as playHistoryLocalStorage } from 'helpers/play'
 
 const { useContext } = React
 
 const PlayHistory = () => {
-  const state = useContext(PlayMusicStateContext)
   const dispatch = useContext(PlayMusicDispatchContext)
+  const playHistory = playHistoryLocalStorage.getItem()
 
   const handleDoubleClick = (item: IMyMusic) => {
     dispatch({
@@ -29,7 +30,7 @@ const PlayHistory = () => {
 
   return (
     <List
-      data={state.playHistory}
+      data={playHistory}
       onDoubleClick={handleDoubleClick}
       onClear={clearPlayHistory}
     />

src/components/Layout/Footer/PlayRecord/PlayList/index.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 
 import List from '../List'
 import { IMyMusic } from 'apis/types/business'
-import { PlayMusicStateContext, PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { PlayMusicDispatchContext, ACTIONS } from 'reducers/playMusic'
+import { playList as playListLocalStorage } from 'helpers/play'
 
 const { useContext } = React
 
 const PlayHistory = () => {
-  const state = useContext(PlayMusicStateContext)
   const dispatch = useContext(PlayMusicDispatchContext)
+  const playList = playListLocalStorage.getItem()
 
   const handleDoubleClick = (item: IMyMusic) => {
     dispatch({
@@ -24,7 +25,7 @@ const PlayHistory = () => {
 
   return (
     <List
-      data={state.playList}
+      data={playList}
       onDoubleClick={handleDoubleClick}
       onClear={handleClear}
     />

src/components/Layout/Footer/index.tsx

@@ -83,10 +83,12 @@ const Footer = () => {
         </div>
       </div>
 
-      <PlayRecord
-        show={showPlayRecord}
-        onClickAway={() => setShowPlayRecord(false)}
-      />
+      {showPlayRecord && (
+        <PlayRecord
+          show={showPlayRecord}
+          onClickAway={() => setShowPlayRecord(false)}
+        />
+      )}
     </div>
   )
 }

src/components/Layout/Sidebar/MusicDetail/Comments/index.tsx

@@ -72,7 +72,7 @@ const Comments = () => {
         <div className={styles.block}>
           <div className={styles.title}>最新评论</div>
           <div className={styles.loading}>
-            <Spinner className='spinner' />
+            <Spinner className='spinner' size={Spinner.SIZE_SMALL} />
           </div>
         </div>
       ) : (

src/components/Layout/Sidebar/MusicDetail/Lyric/index.tsx

@@ -19,16 +19,16 @@ const Lyric = () => {
 
   const audioInfo = useContext(AudioContext)
   const state = useContext(PlayMusicStateContext)
-  const { musicId } = state
+  const { musicId, showLyric } = state
 
   const [lyricState, getLyricFn] = useAsyncFn(songApis.getLyric)
   const lines = formatLyric(lyricState.value?.lyric)
 
   useEffect(() => {
-    if (musicId) {
+    if (musicId && showLyric) {
       getLyricFn(musicId)
     }
-  }, [musicId])
+  }, [musicId, showLyric])
 
   useEffect(() => {
     if (!audioInfo.state?.paused) {

src/pages/App.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
 
 import useAudio from 'hooks/useAudio'
-import { MODE } from 'helpers/play'
+import { MODE, playList as playListLocalStorage } from 'helpers/play'
 import playMusicReducer, { initialState, PlayMusicStateContext, PlayMusicDispatchContext, AudioContext, ACTIONS } from 'reducers/playMusic'
 import logReducer, { initialState as logInitialState, LogStateContext, LogDispatchContext } from 'reducers/log'
 import { IMyMusic } from 'apis/types/business'
@@ -19,9 +19,12 @@ const SonglistDetail = lazy(() => import('./SonglistDetail'))
 const App = () => {
   const [logState, logDispath] = useReducer(logReducer, logInitialState)
   const [state, dispatch] = useReducer(playMusicReducer, initialState)
+  const { musicId, musicUrl, playMode } = state
+
+  const playList = useMemo(() => playListLocalStorage.getItem(), [musicId])
 
   const [audio, audioState, audioControls, audioRef] = useAudio({
-    src: state.musicUrl,
+    src: musicUrl,
     autoPlay: true,
     onEnded: () => onRadioEnded()
   })
@@ -33,23 +36,25 @@ const App = () => {
       controls: audioControls,
       ref: audioRef
     }
-  }, [state.musicUrl, audio, audioState, audioControls, audioRef])
+  }, [musicUrl, audio, audioState, audioControls, audioRef])
 
-  const onRadioEnded = useCallback(() => {
-    const { playMode, playList, musicId } = state
+  const playMusic = useCallback((index: number) => {
+    dispatch({
+      type: ACTIONS.PLAY,
+      payload: {
+        musicId: playList[index].id,
+        music: playList[index]
+      }
+    })
+  }, [playList])
 
+  const onRadioEnded = useCallback(() => {
     switch (playMode) {
       case MODE.PLAY_IN_ORDER: {
         const idx = playList.findIndex(({ id }: IMyMusic) => id === musicId)
         if (playList.length) {
           const nextIdx = idx > -1 ? (idx + 1) % playList.length : 0
-          dispatch({
-            type: ACTIONS.PLAY,
-            payload: {
-              musicId: playList[nextIdx].id,
-              music: playList[nextIdx]
-            }
-          })
+          playMusic(nextIdx)
         }
         return
       }
@@ -60,20 +65,14 @@ const App = () => {
       case MODE.SHUFFLE_PLAYBACK: {
         if (playList.length) {
           const randomIdx = Math.floor(Math.random() * playList.length)
-          dispatch({
-            type: ACTIONS.PLAY,
-            payload: {
-              musicId: playList[randomIdx].id,
-              music: playList[randomIdx]
-            }
-          })
+          playMusic(randomIdx)
         }
         return
       }
       default:
         return
     }
-  }, [state.musicId, state.playList, state.playMode, audioControls])
+  }, [musicId, playMode, audioControls, playList])
 
   return (<>
     {audio}

src/reducers/playMusic.ts

@@ -36,17 +36,13 @@ export interface IState {
   musicId: number,
   musicUrl: string,
   music?: IMyMusic,
-  playList: IMyMusic[],
-  playHistory: IMyMusic[],
   playMode: MODE,
   showLyric: boolean
 }
 
 export const initialState = {
   musicId: 0,
   musicUrl: '',
-  playList: playListLocalStorage.getItem(),
-  playHistory: playHistoryLocalStorage.getItem(),
   playMode: playModeLocalStorage.getItem(),
   showLyric: false
 }
@@ -63,26 +59,17 @@ const playMusicReducer = (state: IState, { type, payload }: IAction) => {
         ...state,
         musicId: payload?.musicId,
         musicUrl: getMusicUrl(payload?.musicId),
-        music: payload?.music,
-        playHistory: !payload?.keepOrder ? playHistory : state.playHistory
+        music: payload?.music
       }
     }
     case ACTIONS.SET_PLAY_LIST: {
       const playList = payload?.playList || []
       playListLocalStorage.setItem(playList)
-
-      return {
-        ...state,
-        playList
-      }
+      return state
     }
     case ACTIONS.CLEAR_PLAY_LIST: {
       playListLocalStorage.removeItem()
-
-      return {
-        ...state,
-        playList: []
-      }
+      return state
     }
     case ACTIONS.SET_PLAY_MODE: {
       playModeLocalStorage.setItem(payload?.playMode)
@@ -106,11 +93,7 @@ const playMusicReducer = (state: IState, { type, payload }: IAction) => {
     }
     case ACTIONS.CLEAR_PLAY_HISTORY: {
       playHistoryLocalStorage.removeItem()
-
-      return {
-        ...state,
-        playHistory: []
-      }
+      return state
     }
     default:
       return state