Wie und wo speichern Sie das ganze redux store mit AsyncStorage

Wurde ich gefragt, ob ich etwas zu tun haben, wie diese zu retten, den ganzen laden meiner app mit AsyncStorage in meine reagieren native app und prüfen Sie, ob es existiert, wenn die app gestartet wird.

var store;

_loadInitialState = async () => {
  try {
    var value = await AsyncStorage.getItem(STORAGE_KEY);
    if (value !== null){
      store = value;
      console.log('Recovered selection from disk: ' + value);
    } else {
      store = configureStore({});
      console.log('Initialized with no selection on disk.');
    }
  } catch (error) {
    console.log('AsyncStorage error: ' + error.message);
  }
};



export default class App extends Component {

  componentWillMount(){
    this._loadInitialState().done()
  }

  render(){
    return(
      <Provider store={store}>
        <AppContainer/>
      </Provider>
    )
  }
}

Dies ist nicht funktioniert, aber ich hoffe, Sie bekommen die Idee.

InformationsquelleAutor Luis Rizo | 2017-02-27

13

Verwenden redux-persist, so dass Sie nicht haben, um zu verwenden AsyncStorage direkt.
- Super Antwort! vielen Dank!
InformationsquelleAutor wmcbain
18

Ja, das ist eine der Möglichkeiten, Ihre app abrufen kann, seinen Zustand von AsyncStorage. Jedoch, die Art und Weise, die Sie wollen, um Daten zu behandeln, hängt von der app und auf die Daten selbst.

Persönlich Neige ich dazu, nicht zu sparen, die ganzen app store. Einige Abschnitte kann Ihre app muss neu geholt, wenn die Navigation zwischen den Szenen, macht es keinen Sinn zu behalten, dass in AsyncStorage. Dasselbe gilt über die aktuelle Szene und ähnliche Daten, die behalten werden wird, in der redux-store, aber wird wohl ein reset auf die app neu starten.

Zur Sicherung der Daten, die Art und Weise, die ich empfehlen würde ist redux-middleware. Sie beschafft die Aktionen, die Sie brauchen, und tun AsyncStorage.setItem(). Ich denke, es ist ok zu tun, dass anderswo, wie in der Komponenten-code. Es ist nicht so sauber, aber es ist bis zu Ihrem Geschmack, wirklich. Hinweis zu den Tasten, ich nur store verschiedene Datensätze in verschiedenen AsyncStorage Tasten. Dieser Griff, wie Sie weniger Daten bei jedem Shop-update (nicht die ganze Staatliche Struktur, aber es ist Abschnitt nur). Die middleware-code wird ähnlich der folgenden Aussehen:
```
export default store => next => (action) => {
  let result = next(action)

  switch (action.type) {
    case THE_ACTION_THAT_REQUIRES_AN_ASYNCSTORAGE_UPDATE:
      AsyncStorage.setItem('@your_key', action.data_that_is_to_be_stored)
      break

    case ANOTHER_ACTION:
      //similar here
      break

    default:
      break
  }

  return result
}
```
Beachten Sie, dass Sie brauchen nicht zu tun await hier, da in den meisten Fällen ist es ok, um asynchron Daten (es sei denn, Sie gehen, um Lesen und nutzen Sie es sofort, das sollte nicht der Fall sein, wenn Sie mit redux store)

Bezug auf app starten - Sie können AsyncStorage.multiGet man alle Tasten sofort und setzen Sie Sie in den store. Nach der RN docs:
```
AsyncStorage.getAllKeys((err, keys) => {
  AsyncStorage.multiGet(keys, (err, stores) => {
   stores.map((result, i, store) => {
     let key = store[i][0]
     let value = store[i][1]

     //add your data to redux store
    })
  })
})
```
Sobald Sie Lesen die AsyncStorage und erhalten die Daten, die es sinnvoll zu kombinieren, in einem vorgespannten Zustand-Objekt wird ähnlich sein, um Ihre app store und legen Sie die Redux-Shop, der über eine einzige Aktion. Sie können es nennen APP_STATE_INIT übergeben das neu kombinierte Objekt und fangen Sie die Aktion in Ihrem Reduzierstücke, die Notwendigkeit der Nutzung der Daten. Auf diese Weise müssen Sie nur eine einzige Maßnahme zur Rehydrierung Ihrem Staat auf app starten.

Müssen Sie wahrscheinlich einige be-Zustand, wirkt sich das auf das Ladeprogramm angezeigt, bis die AS-Werte abgerufen und die Daten bekommt besiedelten in redux-Shop. Aber insgesamt hast du Recht, man kann die AsyncStorage init und die Wartezeit zu componentWillMount
```
...
async componentWillMount() {
  await _loadInitialState()

  this.setState({
    isLoading: false
  })
}
...
```
Wenn Sie denken, dass Sie für Ihre app, es ist ok alles speichern und Booten Sie den Computer, basierend auf das, fühlen Sie sich frei, um eines der Pakete, die geben einen einfachen Weg, um zu rehydrieren app store aus dem Speicher. Ich würde nur beachten Sie mögliche Auswirkungen auf die Leistung und die Tatsache, dass auf diese Weise verlieren Sie die Kontrolle über das, was Los ist.
- Man könnte auch einfach die whitelist-oder blacklist-spezifische Reduktionen mit redux bestehen, wie beschrieben, auf deren README: github.com/rt2zz/redux-persist
- Cool, das Letzte mal überprüfte ich die option noch nicht da war, danke.
- Ich Schätze Ihre sehr ausführliche Antwort, es beantwortet viele der Fragen, die ich hatte in Bezug auf AsyncStorage und die redux-Shop. Was Sie gesagt haben über die Navigatoren, der richtige ist. Möchte ich hauptsächlich, um die Requisiten zu jedem Bildschirm und das login-token und andere wichtige Elemente wie das. Ich weiß nicht wirklich, wie die Idee der öffnung Ihrer app erscheinen in den Einstellungen, wo Sie aufgehört haben letztes mal. Ich danke Ihnen sehr. Können Sie fügen Sie in Ihrer Antwort einige code darüber, wie etwas zu verhindern gespeichert werden, auf die AsyncStorage? Und wie kann ich einstellen, dass AsyncStorage middleware? Danke nochmal
- Ich habe aktualisiert die Antwort mit einem kleinen Beispiel und einen Kommentar auf speichern Rehydratation. Es ist nicht wirklich zu stoppen etwas, das gespeichert wird. Es ist über die Kommissionierung der Artikel, die Sie speichern möchten, in den ersten Platz.
InformationsquelleAutor dhorelik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.