IT技术 - 使用 redux-persist 保存和检索状态 - React Native - 吾爱随笔录

使用 redux-persist 保存和检索状态 - React Native

IT技术 reactjs react-native redux

2021-05-13 16:50:38

我是 react-native 的新手，我第一次尝试保存我的应用程序的状态。

为了实现这一点，我被建议使用redux-persist。我希望能在网络上找到更多关于它的示例和主题，我觉得我对 redux-persist 如何工作的想法并不那么清晰。

我遵循了 github 页面中的简短指南，但是一旦我关闭并重新打开我的应用程序，我就看不到保存的状态值，但我看到了默认的初始状态值。

这是我的 app.js 文件：

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';

class App extends Component {
  render() {
    const store = compose(applyMiddleware(ReduxThunk), autoRehydrate())(createStore)(reducers); 
    persistStore(store, {storage: AsyncStorage}, () => {
        console.log('restored');
    })
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

export default App;

我还需要别的东西吗？

我还想知道如何console.log获取 redux-persistor 存储中的所有状态值。

提前致谢

3个回答

你已经投入persistStore了render方法。持久性调用是一种副作用，在render.

将其移至componentWillMount，正如 redux-persist 文档对您所说的那样

export default class AppProvider extends Component {

  constructor() {
    super()
    this.state = { rehydrated: false }
  }

  componentWillMount(){
    persistStore(store, {}, () => {
      this.setState({ rehydrated: true })
    })
  }

  render() {
    if(!this.state.rehydrated){
      return <div>Loading...</div>
    }
    return (
      <Provider store={store}>
         {() => <App />}
      </Provider>
    );
  }
}

您需要在呈现 store 之前推迟初始化。这就是这个代码片段的作用

@just-boris 的回答可能会也可能不会为您解决这个问题，但无论如何您绝对应该出于他们提到的原因将调用persistStore移出render函数。

当没有任何错误时，很难判断出了什么问题，但我怀疑persist/REHYDRATE在您的一个减速器中处理操作将帮助您找到问题。

case 'persist/REHYDRATE': {
  console.log(action.payload) // persist's action uses "payload" not "data"

  return state // NOP, just wanted to log the payload
}

您还可以使用浏览器的检查器工具来检查本地存储，这将使您了解其中存储的内容redux-persist。

您可以使用

store.getState().whatEver;

其它你可能感兴趣的问题

上一篇简单材质 UI 对话框示例具有不需要的滚动条下一篇从 materialui 组件中删除/覆盖默认样式