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

Posted 2023-03-16

【中文标题】使用 AsyncStorage 如何以及在何处保存整个 redux 存储

【英文标题】：How and where to save the whole redux store using AsyncStorage

【发布时间】：2017-07-18 15:50:54

【问题描述】：

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

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

这行不通，但我希望你能明白。

【参考方案1】：

是的，这是您的应用可以从 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 商店）

关于应用程序启动 - 您可以使用 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 init 和等待时间放到componentWillMount

...
async componentWillMount() 
  await _loadInitialState()

  this.setState(
    isLoading: false
  )

...

如果您认为对于您的应用来说，可以保存所有内容并在此基础上启动，请随意使用其中一个软件包，该软件包提供了一种简单的方法来从存储中补充应用商店的水分。我只想指出对性能的潜在影响，以及这样你会失去对正在发生的事情的控制的事实。

【讨论】：

您也可以使用 redux 将特定的 reducer 列入白名单或黑名单，如其自述文件中所述：github.com/rt2zz/redux-persist

酷，上次我检查的选项不存在，谢谢。

非常感谢您非常详细的回答，它回答了我关于 AsyncStorage 和 redux 存储的许多问题。你说的导航员是正确的。我主要想获得每个屏幕的道具以及登录令牌和其他类似的关键元素。我真的不喜欢打开您的应用程序并出现在您上次离开的设置菜单中的想法。非常感谢。您能否在答案中添加一些有关如何阻止将某些内容保存在 AsyncStorage 上的代码？以及如何设置 AsyncStorage 中间件？再次感谢您

我用一个小例子更新了答案，并对商店补液发表了评论。这并不是真的要阻止某些东西被保存。这是关于首先选择要保存的项目。

【参考方案2】：

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