React Native Redux - 从异步存储初始化默认状态

Question

我正在开发一个Android应用程序，我的屏幕必须取决于用户是否登录。登录数据存储在异步存储中。

到应用启动时，它应该从 AsyncStorage 获取数据并将其设置为默认状态。我怎样才能做到这一点？

下面是我的 redux 结构

索引.安卓.js

import {
  AppRegistry,
} from 'react-native';
import Root from './src/scripts/Root.js';
AppRegistry.registerComponent('reduxReactNavigation', () => Root);

根.js

import React, { Component } from "react";
import { Text, AsyncStorage } from "react-native";
import { Provider, connect } from "react-redux";
import { addNavigationHelpers } from 'react-navigation';
import getStore from "./store";
import { AppNavigator } from './routers';
const navReducer = (state, action) => {
    const newState = AppNavigator.router.getStateForAction(action, state);
    return newState || state;
};
const mapStateToProps = (state) => ({
    nav: state.nav
});
const user = {};
class App extends Component {
  constructor(){
    super();
  }
  render() {
    return (
        <AppNavigator
            navigation={addNavigationHelpers({
                dispatch: this.props.dispatch,
                state: this.props.nav
            })}
        />
    );
  }
}
const AppWithNavigationState = connect(mapStateToProps)(App);
const store = getStore(navReducer);
export default function Root() {
    return (
        <Provider store={store}>
            <AppWithNavigationState />
        </Provider>
    );
}

用户减速器

import {
    REGISTER_USER,
    UPDATE_USER,
    LOGIN_USER
} from '../../actions/actionTypes';
import { handleActions } from 'redux-actions';
**// here is the default state, i would like to get from asyncstorage**
const defaultState = {
  isLoggedIn: false,
  user:{},
};
export const user = handleActions({
  REGISTER_USER: {
    next(state, action){
      return { ...state, user: action.payload, isLoggedIn: true }
    }
  },
  LOGIN_USER: {
    next(state, action){
      return { ...state, user: action.payload, isLoggedIn: true }
    }
  },
}, defaultState);

Answer 1

您可以使用组件生命周期方法组件 WillMount 从 AsyncStorage 获取数据，当数据到达时，您可以更改状态。