Wie Benutzer angemeldet bleiben (Aka, Zustand Persistenz) in reaktiven nativen

Question

Ich versuche, einen Benutzer in meiner Anwendung angemeldet zu halten. Ich habe verschiedene Techniken ausprobiert, aber ich habe keine Ahnung, wie ich Daten in den Zustand zurücklesen kann, wenn die Anwendung gestartet wird.

Im Moment habe ich die folgenden:

const getInitialState =() => { 
    var _initState = { 
     auth: new AuthInitialState(), 
     global: (new GlobalInitialState()) 
    }; 

    return _initState; 
}; 

export default function configureStore() { 


    const store = createStoreWithMiddleware(reducer, load(APP_STORAGE) || getInitialState()); 

    store.subscribe(() => { 
     if(!load('debug')) { 
      save(APP_STORAGE, store.getState()); 
     } 
    }); 

    return store; 
}; 

const createStoreWithMiddleware = applyMiddleware(
    thunk, 
    localStorageMiddleware, 
    logger 
)(createStore) 

, in dem die Last und speichern Methoden sind verantwortlich für die Daten an eine AsyncStorage Speichern (unter Verwendung reagieren-native-simple-store)

export const load = (key) => { 
    return store.get(key); 
} 

export const save = async (key, data) => { 
    store.save(key, JSON.stringify(data)); 
} 

Das Rendern meiner Wurzel ist das aktuelle:

render() { 
    const store = configureStore(); 

    return (
     <Provider store={store}> 
      <MyApp/> 
     </Provider> 
    ); 
} 

Die Daten werden korrekt gespeichert (durch der sichere Abonnent), aber bei einem erneuten Laden oder App-Relaunch wird es nicht korrekt neu geladen. So wird mein Benutzer jedes Mal ausgeloggt.

Am Ende möchte ich auch diese Technik anwenden, um beim Start der App zur richtigen Seite zu navigieren.

Irgendwelche Empfehlungen, wie ich das angehen kann?

Answer 1

Sie redux-persist verwenden können, um dies zu erreichen:

import { createStore, applyMiddleware, compose } from 'redux'; 
import { persistStore, autoRehydrate } from 'redux-persist'; 
import { AsyncStorage } from 'react-native'; 

export default function configureStore() { 

    const store = createStore(reducers, getInitialState(), compose(
     applyMiddleware([ 
      thunk, 
      localStorageMiddleware, 
      logger 
     ]), 
     autoRehydrate() 
    ) 
    ); 

    persistStore(store, { storage: AsyncStorage }); 

    return store; 
}; 

Damit jedes Mal, wenn Ihr Anwendungslast , das Geschäft wird vom lokalen Speicher hydratisiert. Sie müssen sich nicht mit der AsyncStorage befassen, alles wird automatisch für Sie erledigt. Sie können read the docs von redux-persist anpassen es nach Ihren Bedürfnissen (fügen Sie ein whitelist, ein blacklist, einen Rückruf, wenn der Speicher rehydratisiert ..)

Answer 2

Ihre grundlegende Herangehensweise sieht gut aus.

Allerdings reagiert react-native-simple-store den Status für Sie. Wenn Sie die JSON.stringify() in Ihrer Speicherfunktion ausführen, wird sie beim nächsten Start Ihrer App nicht richtig dekodiert.

Weitere Details finden Sie unter react-native-simple-store's codebase.

---

Um dies zu beheben, JSON.stringify() von Ihrer entfernen speichert Funktion:

export const save = async (key, data) => { 
    store.save(key, data); 
}