javascript - 如何在react-native中保持用户登录(又名，状态持久性)

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)

其中load和save方法负责将数据保存到AsyncStorage(使用react-native-simple-store)

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，一切都会自动为您完成。您可以read the docs redux-persist 根据您的需要进行自定义(添加白名单、黑名单、商店补水时的回调..)