with-immutable

A higher order component for translating immutable objects to raw javascript objects.

Installation

yarn add with-immutable

or

npm install with-immutable

Usage

import withImmutable from 'with-immutable';

Example:

import React from 'react';
import { connect } from 'react-redux';
import withImmutable from 'with-immutable';

class ContainerComponent extends React.Component {
  render() {
    const { data } = this.props; // raw js object
    return (
      <div>
        {data.map((ele, idx) => (
          <span key={idx}>{ele.name}</span>
        ))}
      </div>
    );
  }
}

const mapPropsToState = store => {
  const state = store.get('test');
  return {
    data: state.get('data'), // immutable object
  };
};

export default connect(mapPropsToState)(withImmutable(ContainerComponent));

Config

with-immutable has a second parameter that is an object. See the following:

param	type	Default
showInfo	bool	false
pure	bool	true

When the showInfo is true, with-immutable will print the update info when the component did updated.

When the pure is true, with-immutable will add shouldComponentUpdate lifecycle method for solving the performance issue.