如何正確使用getStoredState以減少餘量

Question

我不確定我是否正確使用了來自redux-persist庫的getStoredState。我想使用一直存在的商店作爲默認的Redux商店。

配置/ 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

import store from 'config/store'; 
import { Provider } from 'react-redux'; 

export default() => (
    <Provider store={store}> 
    // 
    </Provider> 
) 

這將產生以下警告：

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` 

任何想法是什麼原因造成這些警告？我有一種感覺，我在store.js中做了一些錯誤

Answer 1

問題是，當您嘗試實例化Provider時，您的存儲變量仍處於掛起狀態：getStoreState方法返回一個Promise，所以您必須等到它完成使用商店。

這個例子顯示了一個簡單的實現：

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

    } 
} 

任何改進建議，歡迎。