slashwhatever

I’ve been struggling to decipher the ImmutableJS documentation and while I can appreciate the benefits, the learning curve has been steep. I therefore wanted a way to ensure that if I later change my mind about implementing ImmutableJS, I had an easy way out without having to recode every React component in an ever growing app.

 

I want to keep my components clean of other frameworks (as much as possible) and this includes having zero ImmutableJS code in there. Note that I am using Redux but I don’t think it’s a requirement to maintain this philosophy.

So I use a selector in my reducer file (but you could just have a file where you keep your ImmutableJS abstractions):

 

export const getMyThings = (state) => {
  return state.get('things');
};

Then my container component has this little function (if you’re not using Redux you can still use a similar method to inject the selector as props):

 

const mapStateToProps = (state) => {
   return {
    things: getMyThings(state)
  };
};

 

Finally, my component can simply use it’s props without worrying about ImmutableJS:

 

class ListOfThings extends Component {
  render() {
    return (
      this.props.things.map(t => <ThingItem key={t.id} thing={t}/>)
    )
  }
};

export default ListOfThings;

Voila! Clean component, abstracted ImmutableJS. So when you finally get tired of tearing your hair out over the impenetrable ImmutableJS docs, you can switch it out without having to recode every component in your app.

 

Just my $0.02 as a relative n00b to React, Redux and ImmutableJS: