Redux Remember saves and loads your redux state from a key-value store of your choice.
Key features:
- Saves (persists) and loads (rehydrates) only allowed keys and does not touch anything else.
- Completely unit and battle tested.
- Works on both web (any redux compatible app) and native (react-native).
Works with any of the following:
- AsyncStorage (react-native)
- LocalStorage (web)
- SessionStorage (web)
- Your own custom storage driver that implements
setItem(key, value)
andgetItem(key)
$ npm install --save redux-remember
# or
$ yarn add redux-remember
import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { rememberReducer, rememberEnhancer } from 'redux-remember';
const myStateIsRemembered = createSlice({
name: 'persisted-slice',
initialState: {
text: ''
},
reducers: {
setPersistedText(state, action: PayloadAction<{ text: string }>) {
state.text = action.payload;
}
}
});
const myStateIsForgotten = createSlice({
name: 'forgotten-slice',
initialState: {
text: ''
},
reducers: {
setForgottenText(state, action: PayloadAction<{ text: string }>) {
state.text = action.payload;
}
}
});
const reducers = {
myStateIsRemembered: myStateIsRemembered.reducer,
myStateIsForgotten: myStateIsForgotten.reducer,
someExtraData: (state = 'bla') => state
};
export const actions = {
...myStateIsRemembered.actions,
...myStateIsForgotten.actions
};
const rememberedKeys = [ 'myStateIsRemembered' ]; // 'myStateIsForgotten' will be forgotten, as it's not in this list
const reducer = rememberReducer(reducers);
const store = configureStore({
reducer,
enhancers: [rememberEnhancer(
window.localStorage,
rememberedKeys,
{ persistWholeStore: true }
)]
});
// Continue using the redux store as usual...
import AsyncStorage from '@react-native-community/async-storage';
import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { rememberReducer, rememberEnhancer } from 'redux-remember';
const myStateIsRemembered = createSlice({
name: 'persisted-slice',
initialState: {
text: ''
},
reducers: {
setPersistedText(state, action: PayloadAction<{ text: string }>) {
state.text = action.payload;
}
}
});
const myStateIsForgotten = createSlice({
name: 'forgotten-slice',
initialState: {
text: ''
},
reducers: {
setForgottenText(state, action: PayloadAction<{ text: string }>) {
state.text = action.payload;
}
}
});
const reducers = {
myStateIsRemembered: myStateIsRemembered.reducer,
myStateIsForgotten: myStateIsForgotten.reducer,
someExtraData: (state = 'bla') => state
};
export const actions = {
...myStateIsRemembered.actions,
...myStateIsForgotten.actions
};
const rememberedKeys = [ 'myStateIsRemembered' ]; // 'myStateIsForgotten' will be forgotten, as it's not in this list
const reducer = rememberReducer(reducers);
const store = configureStore({
reducer,
enhancers: [rememberEnhancer(
AsyncStorage, // or your own custom storage driver
rememberedKeys,
{ persistWholeStore: true }
)]
});
// Continue using the redux store as usual...
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { REMEMBER_REHYDRATED, REMEMBER_PERSISTED } from 'redux-remember';
type InitialState = {
changeMe: any;
rehydrated: boolean;
persisted: boolean;
};
const initialState: InitialState = {
changeMe: null,
rehydrated: false,
persisted: false
};
const usageInsideReducer = createSlice({
name: 'usage-inside-reducer-slice',
initialState,
reducers: {
someAction(state, action: PayloadAction<{ changeMe: any }>) {
if (!state.rehydrated) {
return;
}
state.changeMe = action.payload.changeMe;
}
},
extraReducers: (builder) => builder
.addCase(REMEMBER_REHYDRATED, (state, action) => {
state.changeMe = (action as PayloadAction<InitialState>).payload.changeMe;
state.rehydrated = true;
})
.addCase(REMEMBER_PERSISTED, (state) => {
state.rehydrated = false;
state.persisted = true;
})
});
Examples here are using redux toolkit.
If your application still isn't migrated to redux toolkit, check the legacy usage documentation.
-
rememberReducer(redicers: Reducer | ReducersMapObject)
- Arguments:
- redicers (required) - takes the result of
combineReducers()
function or list of non-combined reducers to combine internally (same as redux toolkit);
- redicers (required) - takes the result of
- Returns - a new root reducer to use as first argument for the
configureStore()
(redux toolkit) or thecreateStore()
(plain redux) function;
- Arguments:
-
rememberEnhancer(driver: Driver, rememberedKeys: string[], options?: Options)
- Arguments:
- driver (required) - storage driver instance, that implements the
setItem(key, value)
andgetItem(key)
functions; - rememberedKeys (required) - an array of persistable keys - if an empty array is provided nothing will get persisted;
- options (optional) - plain object of extra options:
- prefix: storage key prefix (default:
'@@remember-'
); - serialize - a plain function that takes unserialized store state and its key (
serialize(state, stateKey)
) and returns serialized state to be persisted (default:JSON.stringify
); - unserialize - a plain function that takes serialized persisted state and its key (
serialize(state, stateKey)
) and returns unserialized to be set in the store (default:JSON.parse
); - persistThrottle - how much time should the persistence be throttled in milliseconds (default:
100
) - persistWholeStore - a boolean which specifies if the whole store should be persisted at once. Generally only use this if you're using your own storage driver which has gigabytes of storage limits. Don't use this when using window.localStorage, window.sessionStorage or AsyncStorage as their limits are quite small. When using this option, key won't be passed to
serialize
norunserialize
functions - (default:false
);
- prefix: storage key prefix (default:
- driver (required) - storage driver instance, that implements the
- Returns - an enhancer to be used with Redux
- Arguments: