如何以及在何处使用 AsyncStorage 保存整个 redux 存储

Question

我想知道我是否必须做这样的事情来使用 AsyncStorage 在我的 react-native 应用程序中保存我的应用程序的整个商店，并在应用程序启动时检查它是否存在。

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

使用 redux-persist 这样您就不必直接使用 AsyncStorage。

Answer 2

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

就我个人而言，我倾向于不保存整个应用商店。在场景之间导航时可能需要重新获取应用的某些部分，将其保留在 AsyncStorage 中没有意义。当前场景和类似数据也是如此，它们将保存在 redux 存储中，但可能会在应用重启时重置。

关于将数据保存到AS，我推荐的方式是redux middleware。你拦截你需要的动作，然后做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 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
    })
  })
})

一旦您阅读了 AsyncStorage 并获取了数据，就可以将其组合成一个类似于您的应用程序商店的预加载状态对象，并通过单个操作设置 Redux 商店。您可以调用它 APP_STATE_INIT，将新组合的对象传递给它并在需要使用数据的化简器中捕获操作。这样，您只需执行一个操作即可在应用程序启动时恢复状态。

您可能需要一些加载状态，这将影响正在显示的加载程序，直到获取 AS 值并将数据填充到 redux 存储中。但总的来说你是对的，你可以把 AsyncStorage 初始化和等待时间设置为 componentWillMount

...
async componentWillMount() {
  await _loadInitialState()

  this.setState({
    isLoading: false
  })
}
...

如果您认为对于您的应用程序来说，保存所有内容并以此为基础启动是可以的，请随意使用其中一个包，它提供了一种从存储中重新水合应用程序商店的简单方法。我只是注意到对性能的潜在影响以及这样一个事实，即您无法控制正在发生的事情。

如何以及在何处使用 AsyncStorage 保存整个 redux 存储

How and where to save the whole redux store using AsyncStorage

react-native

redux

store

react-redux

asyncstorage