// store.ts
export const createAppReducer = () =>
combineReducers({
system: systemReducer,
posts: postsReducer,
});
const reducer = createAppReducer();
export type RootState = ReturnType<typeof reducer>;
export const createAppStore = (initialState?: Partial<RootState>) =>
configureStore({
reducer,
preloadedState: initialState,
});
// utils.ts
import EncryptedStorage from 'react-native-encrypted-storage';
export const getStateFromAsyncStorage = () => {
async function retrieveUserSession() {
try {
const session = await EncryptedStorage.getItem('user_session');
if (!!session) {
return {
system: {
userId: JSON.parse(session).userId,
accessToken: JSON.parse(session).bmAccessToken,
refreshToken: JSON.parse(session).bmRefreshToken,
},
};
}
} catch (error) {
console.log(error);
}
return {}
}
const res = retrieveUserSession()
return res;
};
// App.tsx
const state = getStateFromAsyncStorage()
const store = createAppStore(state);
const Stack = createNativeStackNavigator();
const App = () => {
return (
<Provider store={store}>
<NavigationContainer>
<AuthStack />
</NavigationContainer>
</Provider>
)
}
export default App;
I am facing an issue where I cannot pass the state variable to the create App Store function, as getStateFromAsyncStorage() returns a Promise. How can I ensure that the Partial type is preserved in state after calling getStateFromAsyncStorage()? Alternatively, can someone suggest a method to securely store JWT tokens in React Native?