Question

我有一个标头组件，用于提取用户详细信息，然后将其存储在redux中。

现在，在用户个人资料编辑页面中，我正在连接相同的reducer来获取用户详细信息。

export default connect(state => ({
  ...state.user,
}),{
  ...actions,
})(MyProfile);

this.props.user包含用户对象。

问题在于，刷新页面时，redux状态不会持久，并且props中没有用户对象。

解决此问题的正确方法是什么？

Answer 1

一种方法是使用redux-persist。将商店更新为使用持久化的reducer就像这样：

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native

import rootReducer from './reducers'

const persistConfig = {
   key: 'root',
   storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
   let store = createStore(persistedReducer)
   let persistor = persistStore(store)
   return { store, persistor }
}

它使用localStorage来存储数据。因此，下一次刷新页面时，它将重新存储来自localStorage的商店。

Redux状态不会在刷新时持续存在

1 个答案: