如何让用户以react-native身份登录(Aka,状态持久性)

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,一切都是自动完成的.您可以阅读文档的redux-persist自定义它根据你的需要(加whitelist,一blacklist,当商店再水合回调..)