React-native redux - this.props are undefined from AsyncStorage

Question

Being a newbie with RN and Redux, I'm confused as to why my props are undefined after reading from AsyncStorage.

I log in, save the state to the store and storage... I reload the app and read from the storage and update the state. The storage is retrieving my object but the props are undefined.

actions.js:

export const getSession = (data) => ({
    type: 'GET_SESSION',
    payload: {
        user: data
    }
});

export const getUserSession = () => dispatch => {
    return AsyncStorage.getItem('userSession').then((data) => {
        console.log('Props at asynsstorage: ', data);
        // {"current_user":{"uid":"1","roles":["authenticated","administrator"], ...}
        dispatch(loading(false));
        dispatch(getSession(data));
    })
    .catch((err) => {
    })
}

reducer.js

import { combineReducers } from 'redux';

const defaultState = {
    xcsrf: '',
    user: {},
    loading: false,
    error: '',
};

const authReducer = ( state = defaultState, action ) => {
    switch(action.type) {
        case 'GET_SESSION':
            return {
            ...state,
                user: action.payload.user,
                loading: false,
            }

        case 'SAVE_SESSION':
            return {
                ...state,
                user: action.payload.user,
                loading: false,
            }

        default:
            return state;
    }
}

export default combineReducers({
    authReducer: authReducer
});

authLoading.js // screen

class AuthLoadingScreen extends React.Component {
    constructor() {
        super();
    }

    componentDidMount = () => {
        this.props.getUserSession().then(() => {
            console.log( 'Props at loading: ', this.props.user );
            // undefined

        })
        .catch(error => {
        })
    };

    // Render any loading content that you like here
    render() {
        return ();
    }
}

const mapStateToProps = state => ({
    user: state.user,
});


const mapDispatchToProps = dispatch => ({
    getUserSession: () => dispatch(getUserSession()),
});

export default connect(mapStateToProps, mapDispatchToProps)(AuthLoadingScreen);

Answer 1

You cannot access directly user of reducer. So change

const mapStateToProps = state => ({
    user: state.user,
});

To

const mapStateToProps = state => ({
    user: state.authReducer.user,
});

And one more thing AsyncStorage's getItem() method return string of stored data. You have not converted to it json. So please also convert that as below :

export const getUserSession = () => dispatch => {
    return AsyncStorage.getItem('userSession').then((data) => {
        console.log('Props at asynsstorage: ', data);
        // {"current_user":{"uid":"1","roles":["authenticated","administrator"], ...}
        dispatch(loading(false));
        dispatch(getSession(JSON.parse(data))); //convert to json here
    })
    .catch((err) => {
    })
}