immutablejs turning object after dispatch

Question

I'm building a simple react/flux application using the store from flux/utils and, of course, Immutablejs. When the application boot initially the state retrieved from store is an Immutable.map but after a dispatch the map turns magically to object keeping all the map properties but throwing an exception when I try to get a key value.

My dispatcher:

export function dispatch(type, action = {}) {

    if (!type) {
        throw new Error('You forgot to specify type.');
    }

    // In production, thanks to DefinePlugin in webpack.config.production.js,
    // this comparison will turn `false`, and UglifyJS will cut logging out
    // as part of dead code elimination.
    if (process.env.NODE_ENV !== 'production') {
        // Logging all actions is useful for figuring out mistakes in code.
        // All data that flows into our application comes in form of actions.
        // Actions are just plain JavaScript objects describing “what happened”.
        // Think of them as newspapers.
        if (action.error) {
            console.error(type, action);
        } else {
            console.log(type, action);
        }
    }
    debugger;
    flux.dispatch({ type, ...action });
} 

my store:

class TabStoreClass extends Store {

    constructor(dispatcher, store) {
        super(dispatcher, store);
        this._store = store;
    }

    getStore() {
        return this._store;
    }

//Register each of the actions with the dispatcher
//by changing the store's data and emitting a
//change
    __onDispatch(payload) {

        const { type, activeKey } = payload;

        switch (type) {
            case ActionTypes.CHANGE_TAB:
                this._store = this._store.update("activeKey", (activeKey) => activeKey);
                this.__emitChange();
                break;
        }
    }
}


let store = Immutable.Map({ activeKey: 1 });

const TabStore = new TabStoreClass(AppDispatcher, store);

export default TabStore;

and the component:

export default class AppContainer extends Component {

    constructor(props) {
        super(props);
        this.state = TabStore.getStore();
    }

    componentDidMount() {
        TabStore.addListener(this._onChange);
    }

    componentWillUnmount() {
        TabStore.remove();
    }

    _onChange = () => {
        this.setState(TabStore.getStore());
    }

     render() {
         // AFTER A DISPATCH THE STATE TURNS TO OBJECT!!!!
         console.log("state", this.state);

         render() {

         console.log("state", this.state);

         return (
              <div>
                <TopNavigation activeKey={this.state.get("activeKey")} />
                 <Grid fluid>
                     <Row>
                         <Col className="sidebar" md={2}>
                           <SideBar activeKey={this.state.get("activeKey")} />
                         </Col>
                         <Col className="main" sm={9} smOffset={3} md={10} mdOffset={2}>
                            {this.props.children}
                         </Col>
                     </Row>
                 </Grid>
              </div>
         );
       }
     }
}

And the component that triggers the action:

export default class TopNavigation extends Component {

static propTypes = {
    activeKey: PropTypes.number.isRequired
};

handleSelect = (selectedKey) => {
    AppActionCreator.changeTab({ activeKey: selectedKey });
}

Image of the error as well.

Am I doing something wrong (for certain) or is it a bug?

Answer 1

Your problem is that a React component's state cannot be an Immutable.js structure. It needs to be a plain js object. So, your store should be instead:

let store = {
  data: Immutable.Map({ activeKey: 1 })
};