CODEWITHSUNDEEP
local-storagereact-nativeredux
James111
James111

Reputation: 15903

Having trouble setting up redux-localstorage to work with existing store

I can't seem to setup the redux-localstorage module on react-native. I get an error message saying:

TypeError: (0, _reduxLocalstorage.mergePersistedState) is not a function. (In '(0, _reduxLocalstorage.mergePersistedState)()', '(0, _reduxLocalstorage.mergePersistedState)' is undefined)

Here is what my configStore.jsx file looks like. This is where I originally setup my redux store with thunk middleware. There aren't many examples online that show how to setup the redux-localstorage package! I'm not 100% sure how it works either. I'm only needing to store 1 object inside the localstorage, this is the user object. Which will hold the api authentication key + user details. If anyone could point me in the right direction that would be amazing!

const local_storage_reducer = compose(
    mergePersistedState()
)(reducers);

const storage = compose(
  filter('user'),
  adapter(window.localStorage)
)
const createPersistentStore = compose(
  applyMiddleware(thunk),
  persistState(storage),
)(createStore);


const createStoreWithMiddleware = compose(
    applyMiddleware(thunk),
    persistState(storage, 'my-storage-key')
)(createStore);

export default function configureStore() {
    return createStoreWithMiddleware(combineReducers(reducers));
}

export default function configurePersistentStore() {
    return createPersistentStore(reducers);
}

Here is how I inject the store to my components via the provider component.

const store = configureStore();
const persistentStore = configurePersistentStore();
<Provider store={[store,persistentStore] }>
       .... Router stuff here ....

I'm not sure if this is remotely how you setup the redux-localstorage or whether I'm on the right track and have made a small mistake.

Upvotes: 0

Views: 1100

Answers (1)

vicentedealencar
vicentedealencar

Reputation: 933

As Josh Buchea pointed out you can't use localStorage on React Native, so AsyncStorage is the way out.

redux-localstorage already have an adapter for that:

import {AsyncStorage} from 'react-native';
import adapter from 'redux-localstorage/lib/adapters/AsyncStorage';

const storage = adapter(AsyncStorage);

Upvotes: 1

Related Questions