How to convert this create store to a promise based? - reactjs

Question

My app is originally loading data from local-storage, Now i am trying to use firebase.
Firebase always tend to return a promise. So I am trying to convert the store into firebase return one.
here is the original one
export const loadState = () => {
const state: AppState = getDefaultState();
VALID_LABS.forEach(labId => {
state.labs[labId] = getDefaultLabState();
STORAGE_CONFIG.forEach(storageField => {
const { statePath, storageKey, defaultValueFn } = storageField;
const loadedValue = getFromLocalStorage(
labId,
storageKey,
defaultValueFn()
);
cachedValues[`${labId}:${storageKey}`] = loadedValue;
set(state, `labs.${labId}.${statePath}`, loadedValue);
});
});
return state as AppState;
};
const store = createStore(rootReducer, loadState(), applyMiddleware(thunk));
store.subscribe(
throttle(() => {
saveState(store.getState());
}, 500)
);
as you can see i am making process working fine. But the problem arise when i start using firebase.
my loadState become something like this.
export const loadState = (): AppState => {
if (firebase.auth().currentUser.uid) {
let userId = firebase.auth().currentUser.uid;
return firebase
.database()
.ref('/users/' + userId)
.once('value')
.then(function(snapshot) {
return snapshot.val() as AppState;
}).catch((err) => {
console.error(err)
})
}
};
So I also need to convert the store to accept the promise returning from the new loadState.
I don't know how to convert it since I am also using applyMiddleWare(thunk)
let saveState: (state: AppState) => void
 ;
let loadState: () => AppState;
if(firebase.auth().currentUser){
loadState = loadStateFirebase;
saveState = saveStateFirebase;
}else{
loadState = loadStateLocalStorage;
saveState = saveStateLocalStorage;
}
// call loadstate then data,pass it in as second para to appstate store
const store = createStore(rootReducer, loadState(), applyMiddleware(thunk));
store.subscribe(
throttle(() => {
saveState(store.getState());
}, 500)
);
Can someone help me

Answer 1

First things first, there is a small bug, you should probably throw err in the end of your catch block, if you don't, error will be considered handled and whatever is returned from catch will be considered the value of the promise. In this case it is undefined, so if an error happens, loadState will resolve to undefined instead of AppState object, which can cause some issues, but that's up to you, maybe you have other plans how to handle this
Anyway, the problem with promises is that as soon as one single function starts using it, everything else must as well. The easier option would be to create store in an asynchronous function:
function createStore() {
return loadState()
.then(state => {
const store = createStore(rootReducer, state, applyMiddleware(thunk))
// Either subscribe to store here
return store
})
}
const storePromise = createStore()
// or here
/* storePromise.then(store => store.subscribe(...))
or using async/await
async function createStore() {
const state = await loadState()
return createStore(rootReducer, state, applyMiddleware(thunk))
}
const storePromise = createStore()
It's hard to tell if this will suit your application, judging by tags, you're using react, so you may need to add extra logic to load this store for example write a StoreProvider and wrap your App with it:
function StoreProvider({ children }: { children?: ReactNode }) {
const [store, setStore] = useState<Store<AppState> | null>(null)
useEffect(() => {
createStore().then(setStore)
}, [])
if(!store) return <Loading /> // or whatever
return <Provider store={store}>{children}</Provider>
}
This may be fine for you or may not. Usually this is not very good, because your app cannot render, while firebase is loading its stuff. Another solution would be to initialize store with empty state in the beginning, render the parts of your application that don't need firebase staff and let others wait for it to load, you could use thunks for this or create three actions LOAD_STORE/REQUEST, LOAD_STORE/SUCCESS, LOAD_STORE/ERROR and make your app render in the appropriate way. You could maybe create a system that would queue some actions that need store while it is loading and executes them automatically as soon as it finished, there is a lot of space for creativity and frustration here, designing asynchronous stores is quite a challenge and you need to decide how you want to do it depending on your application needs