如何保持用戶登錄（也就是狀態持久性）在反應本機

Question

我想保持用戶登錄在我的應用程序。我嘗試了幾種技術，但我不知道如何在應用程序啓動時將數據讀回到狀態。

現在我有以下：

const getInitialState =() => { 
    var _initState = { 
     auth: new AuthInitialState(), 
     global: (new GlobalInitialState()) 
    }; 

    return _initState; 
}; 

export default function configureStore() { 


    const store = createStoreWithMiddleware(reducer, load(APP_STORAGE) || getInitialState()); 

    store.subscribe(() => { 
     if(!load('debug')) { 
      save(APP_STORAGE, store.getState()); 
     } 
    }); 

    return store; 
}; 

const createStoreWithMiddleware = applyMiddleware(
    thunk, 
    localStorageMiddleware, 
    logger 
)(createStore) 

在其中加載和保存方法負責數據保存到一個AsyncStorage（使用反應天然-簡單店內）

export const load = (key) => { 
    return store.get(key); 
} 

export const save = async (key, data) => { 
    store.save(key, JSON.stringify(data)); 
} 

我的根的渲染是當前的：

render() { 
    const store = configureStore(); 

    return (
     <Provider store={store}> 
      <MyApp/> 
     </Provider> 
    ); 
} 

數據正在正確保存（通過保存訂閱者），但在熱重新加載或應用重新啓動時未正確重新加載。因此，我的用戶每次都會被註銷。

最後，我還想應用此技術在應用程序啓動時導航到正確的頁面。

任何關於如何處理這個問題的建議？

Answer 1

您可以使用redux-persist來實現這一目標：

import { createStore, applyMiddleware, compose } from 'redux'; 
import { persistStore, autoRehydrate } from 'redux-persist'; 
import { AsyncStorage } from 'react-native'; 

export default function configureStore() { 

    const store = createStore(reducers, getInitialState(), compose(
     applyMiddleware([ 
      thunk, 
      localStorageMiddleware, 
      logger 
     ]), 
     autoRehydrate() 
    ) 
    ); 

    persistStore(store, { storage: AsyncStorage }); 

    return store; 
}; 

有了這個，每次應用程序負載，該商店從本地存儲中水化。你不必處理AsyncStorage，一切都是爲你自動完成的。你可以的redux-persistread the docs來定製它根據你的需要（加whitelist，一個blacklist，當商店再水合回調..）

Answer 2

您的基本方法對我來說很好。

但是，react-native-simple-store將爲您呈現狀態。當您在保存功能中運行JSON.stringify()時，它在下次應用程序啓動時加載時不會正確解碼。

有關更多詳細信息，請參閱react-native-simple-store's codebase。

---

要解決這個問題，從你的保存功能刪除JSON.stringify()：

export const save = async (key, data) => { 
    store.save(key, data); 
}