State is undefined, can not get initial state

[nhuthuynh]

Hi guys,

i'm trying implement redux immutable in my project but i got stuck at connect mapStateToProps because the state returned from redux is Map object from ImmutableJS and i can not access user property also other properties in state by state.user or state.get('user') . So i posted my code here and need some advice from you guys, thanks in advance! Here is my code:

folder: store/configureStore.js

"use strict";

import {applyMiddleware, createStore} from 'redux';
import thunk from 'redux-thunk';
var promise = require('./promise');
var array = require('./array');
import rootReducers from '../reducers';
var createLogger = require('redux-logger');
var {AsyncStorage} = require('react-native');
import Immutable from 'immutable';

var isDebuggingInChrome = __DEV__ && !!window.navigator.userAgent;
const initialState = Immutable.Map({
    user: {
        isLoggedIn: false,
        username: null,
        session_id: null,
        name: null,
        uid: null
    }
});

var logger = createLogger({
  predicate: (getState, action) => isDebuggingInChrome,
  collapsed: true,
  duration: true,
});

var createCassiStore = applyMiddleware(thunk, promise, array, logger)(createStore)

function configureStore(onComplete: ?()=> void) {
    const store = createCassiStore(rootReducers, initialState);
    if (isDebuggingInChrome) {
        window.store = store;
    }
    return store;
}

module.exports = configureStore;

folder: reduders/user.js

'use strict'

import { createReducer } from 'redux-immutablejs'
import { fromJS } from 'immutable'

const initialState = fromJS({
    isLoggedIn: false,
    name: null,
    session_id: null,
    email: null,
    uid: null,
})

const user = createReducer(initialState, {
    'LOGGED_IN': (state, action) => state.merge({
        user: {
            isLoggedIn: true,
            ...action.data
        }
    })
});

module.exports = user

folder reducers/index.js

'use strict'

import {combineReducers} from 'redux-immutablejs';
import {reducer as formReducer} from 'redux-form/immutable';
import {userReducer} from './user';

export default combineReducers({
    form: formReducer,
    user: userReducer
});

folder components/MyNavigator.js

import { connect } from 'react-redux';
import React from 'react';
class MyNavigator extends React.Component {
     render() {
        return (
            <Navigator
                ref="navigator"
                style={{ backgroundColor: '#fff', flex: 1 }}
                initialRoute={{}}
                renderScene={this.renderScene}
            />
        );
    }

    renderScene(route, navigator) {
        if(route.signup)
            return <SignUpScene navigator={navigator} />
        if(route.home)
            return <HomeScene navigator={navigator}/>
        return <LoginScene navigator={navigator} />
    }
}
const mapStateToProps = state => {
    return {
        isLoggedIn: state.user.isLoggedIn || false // error here cannot get user of undefined
    }
}

module.exports = connect(mapStateToProps)(MyNavigator);

[arminsal1]

Hi @nhuthuynh I am having the same issue. Did you find a solution or a workaround?

[apaatsio]

@nhuthuynh You are (were?) using indexiatech/redux-immutablejs. It's a different package. This is gajus/redux-immutable.