Package Exports

redux-immutable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-immutable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

redux-immutable

This package provides a single function combineReducers. combineReducers is equivalent to the redux combineReducers function, except that it expects state to be an Immutable.js object.

When using redux-immutable together with react-redux use mapStateToProps callback of the connect method to transform Immutable object to a regular JavaScript object before passing it to the selectors, e.g.

import React from 'react';

import {
    connect
} from 'react-redux';

/**
 * @param {Immutable}
 * @return {Object} state
 * @return {Object} state.ui
 * @return {Array} state.locations
 */
let selector = (state) => {
    state = state.toJS();

    // Selector logic ...

    return state;
};

class App extends React.Component {
    render () {
        return <div></div>;
    }
}

export default connect(selector)(App);

Using with webpack and Babel

The files in ./src/ are written using ES6 features. Therefore, you need to use a source-to-source compiler when loading the files. If you are using webpack to build your project and Babel, make an exception for the redux-immutable source, e.g.

var webpack = require('webpack');

module.exports = {
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: [
                    /node_modules(?!\/redux\-immutable)/
                ],
                loader: 'babel'
            }
        ]
    }
};

Example

`store.js`

import {
    createStore
} from 'redux';

import {
    combineReducers
} from 'redux-immutable';

import * as reducers from './reducers';

import Immutable from 'immutable';

let app,
    store,
    state = {};

state.ui = {
    activeLocationId: 1
};

state.locations = [
    {
        id: 1,
        name: 'Foo',
        address: 'Foo st.',
        country: 'uk'
    },
    {
        id: 2,
        name: 'Bar',
        address: 'Bar st.',
        country: 'uk'
    }
];

state = Immutable.fromJS(state);

app = combineReducers(reducers);
store = createStore(app, state);

export default store;

`reducers.js`

/**
 * @param {Immutable} state
 * @param {Object} action
 * @param {String} action.type
 * @param {Number} action.id
 */
export let ui = (state, action) => {
    switch (action.type) {
        case 'ACTIVATE_LOCATION':
            state = state.set('activeLocationId', action.id);
            break;
    }

    return state;
};

/**
 * @param {Immutable} state
 * @param {Object} action
 * @param {String} action.type
 * @param {Number} action.id
 */
export let locations = (state, action) => {
    switch (action.type) {
        // @param {String} action.name
        case 'CHANGE_NAME_LOCATION':
            let locationIndex;

            locationIndex = state.findIndex(function (location) {
                return location.get('id') === action.id;
            });

            state = state.update(locationIndex, function (location) {
                return location.set('name', action.name);
            });
            break;
    }

    return state;
};

`app.js`

import React from 'react';

import {
    connect
} from 'react-redux';

/**
 * @param {Immutable}
 * @return {Object} state
 * @return {Object} state.ui
 * @return {Array} state.locations
 */
let selector = (state) => {
    state = state.toJS();

    // Selector logic ...

    return state;
};

class App extends React.Component {
    render () {
        return <div></div>;
    }
}

export default connect(selector)(App);