使用redux-persist保存和检索状态 - React Native-Java 学习之路

我是新来的反应本地人，我正在尝试第一次保存我的应用程序的状态 .

为了实现这一点，我被建议使用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;

Do I need something else?

I'd also like to know how I can console.log all the states values inside the redux-persistor storage.

提前致谢

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

您需要在呈现存储之前推迟初始化 . 这就是这段代码片段的作用

回复于 2024-05-14T15:13:00+08:00

0
您可以使用
```
store.getState().whatEver;
```
回复于 2024-05-14T15:13:00+08:00
0
@ just-boris的答案可能会也可能不会为你解决这个问题，但无论你是否应该将 persistStore 的调用移出 render 函数，原因完全在于他们提到的原因 .

如果没有任何错误，它会出错，但我怀疑在你的某个reducers中处理 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 中存储的内容 .
回复于 2024-05-14T15:13:00+08:00

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

3 回答

相关问题