React Redux Immutable

React Redux Immutable bindings with 0 dependency

Are you using Immutable.js with Redux selectors (reselect or re-reselect)? Take a look at functional-immutable for a null-safe & consistent point-free implementation of your selectors.

Installation

React Redux Immutable relies on peer dependencies, it requires React 0.14 or later, Redux 2 or later, React Redux 5 or later and Immutable 3 already installed.

npm install --save react-redux-immutable

Usage

connect(...vargs)(WrappedComponent, filterList = [], isBlacklist = true)

Thanks to default parameters, React Redux Immutable provides a drop-in replacement of React Redux connect function.

Replace

import { connect } from 'react-redux';

//...

export default connect(
  mapStateToProps, // Returned Immutable props will be left unchanged
  {
    /* actions */
  },
)(myReactComponent); // This component might receive Immutable props

with

import { connect } from 'react-redux-immutable';

//...

export default connect(
  mapStateToProps, // Returned Immutable props will be transformed
  {
    /* actions */
  },
)(myReactComponent); // This component will receive JavaScript props

or with optional filter list

import { connect } from 'react-redux-immutable';

//...

export default connect(
  mapStateToProps, // Returned Immutable props will be transformed
  {
    /* actions */
  },
)(myReactComponent, ['myPropKey']); // This component will receive JavaScript props

toJS(WrappedComponent, filterList = [], isBlacklist = true)

If you want more control over your connect logic, you can use toJS function, as seen on Redux documentation

In addition to your usual connect implementation

import { connect } from 'react-redux';

//...

export default connect(
  mapStateToProps, // Returned Immutable props will be left unchanged
  {
    /* actions */
  },
)(myReactComponent); // This component might receive Immutable props

add the following

import { connect } from 'react-redux';
import { toJS } from 'react-redux-immutable';

//...

export default connect(
  mapStateToProps, // Returned Immutable props will be transformed
  {
    /* actions */
  },
)(toJS(myReactComponent)); // The wrapped component will receive JavaScript props

and with optional filter list

import { connect } from 'react-redux';
import { toJS } from 'react-redux-immutable';

//...

export default connect(
  mapStateToProps, // Returned Immutable props will be transformed
  {
    /* actions */
  },
)(toJS(myReactComponent, ['myPropKey'])); // The wrapped component will receive JavaScript props

Tree-shaking

The toJS and connect functions can be imported directly from react-redux-immutable/to-js and react-redux-immutable/connect respectively.

Authors

The implementation of this module is coming from Redux documentation example of Higher Order Component used to convert Immutable.JS props into JavaScript props based on cpsubrian gist.