ImmutableJS + Redux

Filters.jsx

import React from 'react';
import {List} from 'immutable';
import {shouldComponentUpdate} from 'react-addons-pure-render-mixin';
import {connect} from 'react-redux';
import getFiltersData from './filtersData';
import {filtersDataReady} from './reducer';

const Filters = React.createClass({
  propTypes: {
    getFiltersData: React.PropTypes.func.isRequired,
    values: React.PropTypes.instanceOf(List)
  },


  componentWillMount() {
    this.props.getFiltersData();
  },


  shouldComponentUpdate,


  render() {
    const {values} = this.props;
    // ...
  }
});


const mapStateToProps = ({
  filters
}) => ({
  values: filters.get('value')
});


const mapDispatchToProps = dispatch => ({
  getFiltersData: () => getFiltersData()
    .then(data => dispatch(filtersDataReady(data)))
});


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

filtersData.js

import {fromJS} from 'immutable';


export default () => Promise.resolve(fromJS({
  section: {
  },
  group: {
  },
  value: [
    {name: 'x', value: 1}
  ]
}));

reducer.js

import {fromJS} from 'immutable';


export const FILTERS_DATA_READY = 'FILTERS_DATA_READY';
export const filtersDataReady = data => ({type: FILTERS_DATA_READY, data});


const initialState = fromJS({
  section: {},
  group: {},
  value: []
});


export const filters = (state = initialState, action) => {
  switch (action.type) {
    case FILTERS_DATA_READY:
      return state.merge(action.data);
    default:
      return state;
  }
};

When creating store in the browser:

const store = createReduxStore({
  ...window.__data,
  filters: fromJS(window.__data.filter)
});