A question over Immutable with connectToStores

[sergio11]

Hi there,

I am using a immutable state in the stores as follows:

import alt from '../alt';
import AppActions from '../actions/AppActions';
import Immutable from 'immutable';
import immutable from 'alt-utils/lib/ImmutableUtil';

class AppStore {

  constructor() {
    /*bindActions is a magic Alt method which binds actions to their handlers defined in the store.*/
    this.bindActions(AppActions);
    this.state = Immutable.Map({
        notifications: Immutable.List()
    });
  }

  onDropNotification(notification){
      this.state.notifications = this.state.get('notifications').filter(n => n.id !== notification.id);
  }

  onThrowNotification(notification){
      this.state = this.state.updateIn(['notifications'], arr => arr.push(notification));
  }

}

export default alt.createStore(immutable(AppStore));

The problem I have is that connectToStores passes me an object where the state has no key and I don't know how to access notifications.

App component properties are as follows:

Thanks and Greetings.

[loopmode]

Hi. First of all, you cannot change the store state by assigning to this.state, you have to explicitly call this.setState(nextState), e.g.:

onDropNotification(notification){
   const filteredNotifications = this.state.get('notifications').filter(n => n.id !== notification.id);
   const nextState = this.state.set('notifications', filteredNotifications);
   this.setState(nextState);
}

Then, in your connecting component, you need to implement static getStores and getPropsFromStores methods.
In getPropsFromStores you receive the full state of the store and pick whatever you need to pass down as props, e.g. return {notifications: state.get(notifications')};`

Btw feel free to use a custom wrapper I built on top of goatslackers connectToStores:
https://gist.github.com/loopmode/4babe4cc99ff4bdb7d939f14f3f1d56d
With that you could connect without changing your component. Since you don't use decorator syntax, you'd do:

class MyComponent extends React.Component {
    static propTypes = {
        notifications: ImmutablePropTypes.list
    }
};
const connectStores = connect([[{
   store: AppStore,
   props: ['notifications']
}]]);
export default connectStores(MyComponent);