如何和何处使用AsyncStorage保存整个Redux商店

Question

我想知道我是否必须使用Asyncstorage在我的React-Native应用中保存整个应用程序，并在应用程序启动时检查它是否存在。<<<<<<<<<<<<<<<<<</p>

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>
    )
  }
}

这不起作用，但我希望您明白。

Answer 1

是的，这是您的应用程序可以从AsyncStorage检索其状态的方法之一。但是，您要处理数据的方式取决于应用程序和数据本身。

我个人倾向于不保存整个App Store。当您在场景之间导航时，可能需要重新挑选您的应用程序的某些部分，将其保留在AsyncStorage中是没有意义的。当前场景和类似数据也是如此，该数据将保存在Redux Store中，但可能会在App Restart上重置。

关于将数据保存到AS，我建议的是Redux中间件。您拦截了所需的操作，然后执行AsyncStorage.setItem()。我想可以在其他地方进行此操作，例如在组件代码中。它不是那么干净，但实际上取决于您的口味。有关键的注意 - 我只是将不同的数据集存储在不同的AsyncStorage密钥中。这样，您可以在每个商店更新上处理更少的数据（不是整个状态树，而是部分）。中间软件代码看起来类似于以下内容：

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
}

请注意，您不需要在此处进行await，因为在大多数情况下，可以异步编写数据（除非您要立即阅读和使用它，否则如果您使用Redux Store，则不应该这样）

关于应用程序启动 - 您可以使用AsyncStorage.multiGet立即获取所有密钥并将其放入存储。遵循RN文档：

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
    })
  })
})

阅读AsyncStorage并获取数据后，将其组合成预加载的状态对象是有意义的，该对象将与您的App Store相似，并通过单个操作设置Redux Store。您可以将其称为APP_STATE_INIT，将新组合的对象传递给它，然后在还需要使用数据的还原器中捕获动作。这样，您将只采取一项措施来在应用程序开始时补充您的状态。

您可能需要一些加载状态，这些状态会影响要显示的加载程序，直到获取AS值并将数据填充到Redux Store中为止。但是总的来说，您是对的，您可以将AsyncStorage INIT放在componentWillMount

等待时间

...
async componentWillMount() {
  await _loadInitialState()
  this.setState({
    isLoading: false
  })
}
...

如果您认为适用于应用程序，可以节省所有内容并基于此启动，请随时使用其中一种包装，可以提供一种简单的方法来从存储中补充App Store。我只会注意到对性能的潜在影响以及这样的事实，即您无法控制发生的事情。

Answer 2

使用redux-persist，因此您不必直接使用Asyncstorage。