react-redux-immutable v1.3.0
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.