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，select id, name, count(*) from (SELECT id, name, left(UPPER(name),1) AS letter from da_table) as dummy group by id, name;，在商店重新水化时进行回调..）

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

如何让用户以react-native身份登录（Aka，状态持久性）

2 个答案: