Expanding react-persist reducers to each have their own keys, seems to fix restoring/resetting

This commit is contained in:
James Barnsley
2020-12-19 21:16:57 +13:00
parent fc64f8df65
commit 924df5b7a6
6 changed files with 55 additions and 80 deletions

View File

@ -50,9 +50,10 @@ export function set(data) {
};
}
export function resetState() {
export function resetState(stateKeysToReset) {
return {
type: 'RESET_STATE',
stateKeysToReset,
};
}

View File

@ -1,6 +1,6 @@
import { generateGuid } from '../../util/helpers';
import { makeItemSelector } from '../../util/selectors';
import { formatUser } from '../../util/format';
const coreActions = require('../core/actions');
const uiActions = require('../ui/actions');
@ -124,9 +124,13 @@ export function getMe() {
sendRequest(dispatch, getState, 'account')
.then(
(response) => {
const me = formatUser(response.user);
dispatch({
type: 'GENIUS_ME_LOADED',
me: response.user,
me: {
...me,
uri: `genius:user:${me.id}`,
},
});
},
(error) => {

View File

@ -1,40 +1,12 @@
import { formatUser } from '../../util/format';
const coreActions = require('../core/actions');
const geniusActions = require('./actions');
const GeniusMiddleware = (function () {
return (store) => (next) => (action) => {
const state = store.getState();
switch (action.type) {
case 'GENIUS_ME_LOADED':
var me = formatUser(action.me);
Object.assign(
me,
{
uri: `genius:user:${me.id}`,
},
);
store.dispatch({
type: 'GENIUS_USER_LOADED',
user: action.me,
});
action.me = me;
next(action);
break;
case 'GENIUS_USER_LOADED':
var user = formatUser(action.user);
Object.assign(
user,
{
uri: `genius:user:${user.id}`,
},
);
store.dispatch(coreActions.userLoaded(user));
action.user = user;
store.dispatch(coreActions.userLoaded(action.me));
next(action);
break;

View File

@ -1,4 +1,3 @@
export default function reducer(genius = {}, action) {
switch (action.type) {
case 'GENIUS_SET':

View File

@ -4,8 +4,6 @@ import localForage from 'localforage';
import thunk from 'redux-thunk';
import { generateGuid } from '../util/helpers';
import hardSet from 'redux-persist/lib/stateReconciler/hardSet'
//import storage from '../util/storage';
import core from '../services/core/reducer';
import ui from '../services/ui/reducer';
import pusher from '../services/pusher/reducer';
@ -13,7 +11,6 @@ import mopidy from '../services/mopidy/reducer';
import lastfm from '../services/lastfm/reducer';
import spotify from '../services/spotify/reducer';
import snapcast from '../services/snapcast/reducer';
import google from '../services/google/reducer';
import genius from '../services/genius/reducer';
import migration from './migration';
@ -25,7 +22,6 @@ import mopidyMiddleware from '../services/mopidy/middleware';
import lastfmMiddleware from '../services/lastfm/middleware';
import geniusMiddleware from '../services/genius/middleware';
import spotifyMiddleware from '../services/spotify/middleware';
import googleMiddleware from '../services/google/middleware';
import snapcastMiddleware from '../services/snapcast/middleware';
let initialState = {
@ -103,9 +99,6 @@ let initialState = {
autocomplete_results: {},
authorization_url: 'https://jamesbarnsley.co.nz/iris/auth_spotify.php',
},
google: {
enabled: false,
},
snapcast: {
enabled: false,
connected: false,
@ -120,34 +113,9 @@ let initialState = {
},
};
/*
// load all our stored values from LocalStorage
state.core = { ...state.core, ...storage.get('core') };
state.ui = { ...state.ui, ...storage.get('ui') };
state.mopidy = { ...state.mopidy, ...storage.get('mopidy') };
state.pusher = { ...state.pusher, ...storage.get('pusher') };
state.spotify = { ...state.spotify, ...storage.get('spotify') };
state.lastfm = { ...state.lastfm, ...storage.get('lastfm') };
state.genius = { ...state.genius, ...storage.get('genius') };
state.google = { ...state.google, ...storage.get('google') };
state.snapcast = { ...state.snapcast, ...storage.get('snapcast') };
*/
// Run any migrations
initialState = migration(initialState);
const rootPersistConfig = {
key: 'root',
storage: localForage,
blacklist: [
'ui',
'core',
'spotify',
'pusher',
],
debug: window.test_mode,
};
const corePersistConfig = {
key: 'core',
storage: localForage,
@ -164,6 +132,24 @@ const corePersistConfig = {
],
};
const geniusPersistConfig = {
key: 'genius',
storage: localForage,
debug: window.test_mode,
};
const lastfmPersistConfig = {
key: 'lastfm',
storage: localForage,
debug: window.test_mode,
};
const snapcastPersistConfig = {
key: 'snapcast',
storage: localForage,
debug: window.test_mode,
};
const pusherPersistConfig = {
key: 'pusher',
storage: localForage,
@ -222,22 +208,29 @@ const appReducer = combineReducers({
mopidy: persistReducer(mopidyPersistConfig, mopidy),
spotify: persistReducer(spotifyPersistConfig, spotify),
pusher: persistReducer(pusherPersistConfig, pusher),
lastfm,
genius,
google,
snapcast,
genius: persistReducer(geniusPersistConfig, genius),
lastfm: persistReducer(lastfmPersistConfig, lastfm),
snapcast: persistReducer(snapcastPersistConfig, snapcast),
});
const rootReducer = (state, action) => {
let nextState = state;
if (action.type === 'RESET_STATE') {
state = initialState;
console.log(action);
const { stateKeysToReset } = action;
const resetStates = {};
stateKeysToReset.forEach((key) => {
resetStates[key] = initialState[key];
});
nextState = {
...state,
...resetStates,
};
}
return appReducer(state, action);
return appReducer(nextState, action);
};
const persistedReducer = persistReducer(rootPersistConfig, rootReducer);
const store = createStore(
persistedReducer,
rootReducer,
initialState,
applyMiddleware(
thunk,
@ -248,7 +241,6 @@ const store = createStore(
spotifyMiddleware,
lastfmMiddleware,
geniusMiddleware,
googleMiddleware,
snapcastMiddleware,
),
);

View File

@ -47,11 +47,17 @@ class Reset extends React.Component {
e.preventDefault();
const tasks = [];
const stateKeysToReset = [];
const stateKeys = ['mopidy', 'pusher', 'ui', 'spotify', 'snapcast', 'lastfm', 'genius'];
if (preferences) {
tasks.push(
new Promise((resolve) => {
const keysToRemove = ['persist:root', 'persist:ui', 'persist:spotify', 'persist:pusher'];
const keysToRemove = [];
stateKeys.forEach((key) => {
keysToRemove.push(`persist:${key}`);
stateKeysToReset.push(key);
});
keysToRemove.forEach((key, index) => {
localForage.removeItem(key).then(() => {
console.debug(`Removed ${key}`);
@ -67,8 +73,9 @@ class Reset extends React.Component {
tasks.push(
new Promise((resolve) => {
localForage.keys().then((keys) => {
const keysToKeep = ['persist:root', 'persist:ui', 'persist:spotify', 'persist:pusher'];
const keysToRemove = keys.filter((key) => keysToKeep.indexOf(key) < 0);
const keysToRemove = keys.filter(
(key) => !stateKeys.includes(key.replace('persist:', '')),
);
keysToRemove.forEach((key, index) => {
localForage.removeItem(key).then(() => {
console.debug(`Removed ${key}`);
@ -120,9 +127,9 @@ class Reset extends React.Component {
Promise.all(tasks).then(() => {
console.log('Reset complete, refreshing...');
resetState();
resetState(stateKeysToReset);
setTimeout(
() => window.location = `/iris${test_mode ? '?test_mode=0' : ''}`,
() => window.location = `/iris/settings${test_mode ? '?test_mode=0' : ''}`,
1000,
);
});