Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2026-02-10 15:02:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed perf issue related to too many rerenders

Browse Source 
rerenders were caused by strict equality check on object/array picks
switched artistInfo to new store
updated zustand and fixed deprecation warnings
This commit is contained in:
austinried
2022-03-19 09:52:01 +09:00
parent 47c65ea8cb
commit 13af6555d3
15 changed files with 108 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/state/cache.ts
View File

@@ -20,16 +20,6 @@ export type CacheDirsByServer = Record<string, Record<CacheItemTypeKey, string>>
export type CacheFilesByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheFile>>>
export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheRequest>>>
// export type DownloadedItemsByServer = Record<
// string,
// {
// songs: { [songId: string]: DownloadedSong }
// albums: { [albumId: string]: DownloadedAlbum }
// artists: { [songId: string]: DownloadedArtist }
// playlists: { [playlistId: string]: DownloadedPlaylist }
// }
// >
export type CacheSlice = {
cacheItem: (
key: CacheItemTypeKey,

6
app/state/library.ts
View File

@@ -166,10 +166,6 @@ export type LibrarySlice = {
albums: ById<Album>
albumSongs: OneToMany
// todo: remove these and store in component state
albumsList: PaginatedList
albumsListSize: number
playlists: ById<Playlist>
playlistSongs: OneToMany
@@ -216,8 +212,6 @@ const defaultEntities = () => ({
artistNameTopSongs: {},
albums: {},
albumsList: {},
albumsListSize: 300,
albumSongs: {},
playlists: {},

103
app/state/store.ts
View File

@@ -1,11 +1,12 @@
import { createMusicSlice, MusicSlice } from '@app/state/music'
import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
import AsyncStorage from '@react-native-async-storage/async-storage'
import create from 'zustand'
import { persist, StateStorage } from 'zustand/middleware'
import equal from 'fast-deep-equal/es6/react'
import create, { GetState, Mutate, SetState, StateSelector, StoreApi } from 'zustand'
import { persist, subscribeWithSelector } from 'zustand/middleware'
import { CacheSlice, createCacheSlice } from './cache'
import migrations from './migrations'
import { createLibrarySlice, LibrarySlice } from './library'
import migrations from './migrations'
import { createMusicMapSlice, MusicMapSlice } from './musicmap'
import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'
@@ -23,60 +24,52 @@ export type Store = SettingsSlice &
setHydrated: (hydrated: boolean) => void
}
const storage: StateStorage = {
getItem: async name => {
try {
return await AsyncStorage.getItem(name)
} catch (err) {
console.error(`getItem error (key: ${name})`, err)
return null
}
},
setItem: async (name, item) => {
try {
await AsyncStorage.setItem(name, item)
} catch (err) {
console.error(`setItem error (key: ${name})`, err)
}
},
}
export const useStore = create<
Store,
SetState<Store>,
GetState<Store>,
Mutate<StoreApi<Store>, [['zustand/subscribeWithSelector', never], ['zustand/persist', Partial<Store>]]>
>(
subscribeWithSelector(
persist(
(set, get) => ({
...createSettingsSlice(set, get),
...createMusicSlice(set, get),
...createLibrarySlice(set, get),
...createMusicMapSlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
export const useStore = create<Store>(
persist(
(set, get) => ({
...createSettingsSlice(set, get),
...createMusicSlice(set, get),
...createLibrarySlice(set, get),
...createMusicMapSlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
hydrated: false,
setHydrated: hydrated => set({ hydrated }),
}),
{
name: '@appStore',
version: DB_VERSION,
getStorage: () => AsyncStorage,
// whitelist: ['settings', 'cacheFiles'],
partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServer, true)
postState?.setHydrated(true)
}
},
migrate: (persistedState, version) => {
if (version > DB_VERSION) {
throw new Error('cannot migrate db on a downgrade, delete all data first')
}
hydrated: false,
setHydrated: hydrated => set({ hydrated }),
}),
{
name: '@appStore',
version: DB_VERSION,
getStorage: () => storage,
whitelist: ['settings', 'cacheFiles'],
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServer, true)
postState?.setHydrated(true)
}
for (let i = version; i < DB_VERSION; i++) {
persistedState = migrations[i](persistedState)
}
return persistedState
},
},
migrate: (persistedState, version) => {
if (version > DB_VERSION) {
throw new Error('cannot migrate db on a downgrade, delete all data first')
}
for (let i = version; i < DB_VERSION; i++) {
persistedState = migrations[i](persistedState)
}
return persistedState
},
},
),
),
)
export const useStoreDeep = <U>(stateSelector: StateSelector<Store, U>) => useStore(stateSelector, equal)

14
app/state/trackplayermap.ts
View File

@@ -17,14 +17,12 @@ export const selectTrackPlayerMap = {
export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerMapSlice => ({
mapSongtoTrackExt: async song => {
let artwork = require('@res/fallback.png')
// if (song.coverArt) {
// const filePath = await get().fetchCoverArtFilePath(song.coverArt)
// if (filePath) {
// artwork = filePath
// }
// }
console.log('mapping', song.title)
if (song.coverArt) {
const filePath = await get().fetchCoverArtFilePath(song.coverArt)
if (filePath) {
artwork = filePath
}
}
return {
id: song.id,