[英]How to use getStoredState properly in redux-persist
I'm not sure if I am using the getStoredState
from redux-persist library correctly. 我不确定我是否正确使用了redux-persist库中的getStoredState
。 I'd like to use the store that has been persisted as the default redux store. 我想使用已被保存为默认redux商店的商店。
config/store.js 配置/ store.js
async function getState() {
const storedState = await getStoredState({ storage: AsyncStorage });
const store = createStore(reducers, storedState, compose(
applyMiddleware(logger),
autoRehydrate()
));
persistStore(store, {storage: AsyncStorage);
}
export default getState();
App.js App.js
import store from 'config/store';
import { Provider } from 'react-redux';
export default () => (
<Provider store={store}>
//
</Provider>
)
This produces the following warnings: 这会产生以下警告:
Warning: Failed child context type: The child context `store.subscribe` is marked as required in `Provider`, but its value is `undefined`.
Warning: Failed prop type: The prop `store.subscribe` is marked as required in `Provider`, but its value is `undefined`
Any ideas what is causing these warnings? 是什么原因引起了这些警告? I have a feeling I've done something wrong in store.js 我有一种感觉,我在store.js做错了
The problem is that when you are trying to instantiate the Provider your store variable is still pending: the getStoreState method returns a Promise, so you have to wait until it completes to use the store. 问题是,当您尝试实例化Provider时,您的store变量仍处于未决状态:getStoreState方法返回Promise,因此您必须等到它完成才能使用该存储。
This example shows a sample implementation: 此示例显示了一个示例实现:
import {getStoredState, createPersistor} from 'redux-persist'
class App extends Component {
constructor(props) {
super(props)
this.store = null
this.persistor = null
}
componentWillMount(){
const persistConfig = {storage: AsyncStorage}
getStoredState(persistConfig, (err, restoredState) => {
this.store = createStore(
reducers,
restoredState,
compose(
applyMiddleware(logger,)
)
)
this.persistor = createPersistor(this.store, persistConfig)
// Now that we have the store setted, reload the component
this.forceUpdate()
})
}
render() {
if (!this.store) {
// Loading screen
return <Text>Loading</Text>
} else {
return (
<Provider store={this.store}>
<Router />
</Provider>
)
}
}
}
Any improvements tips are welcome. 欢迎任何改进提示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.