Using Immutable.js without Flux or Redux

Question

I've been messing around with some code and I think I just realized something stupid. Using Immutable.js in React without Flux or Redux is a fool's errand.

toggleTask(task) {
    const found = _.find(this.state.taskList, task => task.name === task);
    found.isDone = !found.isCompleted;
    const index = _.findIndex(this.state.taskList, task => task.name === task);

    const temp = Immutable.fromJS(this.state.taskList);
    temp.setIn([index, 'isDone'], found.isDone).toJS();

    this.setState({ taskList: temp.toJS() });

}

So basically before I realized how much of a fool I was I was making an Immutable object, changed it using Immutable.js methods and then changed it back to an array. It's useless, because shallow compare should work without immutable objects.

shouldComponentUpdate(nextProps) {

    return (this.props.name !== nextProps.name || this.props.priority !== nextProps.priority || this.props.isDone !== nextProps.isDone  );
}

I've been using lodash methods, but since I am comparing the props individually and because they're primitives (primitives like strings and booleans can't be immutables anyways), I don't think it really matters and it would probably have worked even if I didn't use them.

toggleTask(task) {
    const found = _.find(this.state.taskList, task => task.name === task);
    found.isDone = !found.isDone;
    this.setState({ taskList: this.state.taskList });
}

So am I wrong to say that Immutable.js in React is useless without Redux or Flux? Is there something I am not understanding correctly? I've watched examples and they didn't quite make sense to me since I've never used Flux or Redux.

You are not using the library correctly... nothing to do with Flux/Redux. — c0deNinja
– c0deNinja, Commented Apr 25, 2017 at 6:28

prog · Accepted Answer · 2017-04-19 23:29:36Z

1

Yes, you're actually on the right track. The reason why Immutable.js is more useful with Redux/Flux is because Immutable.js allows you to make inexpensive shallow comparisons with deeply-nested json objects. That's its main advantage. In your case, I suspect you have a simple todo application where your state is a list of simple arrays, in that case you don't get anything from using Immutable.js, because you can just compare the properties, which isn't expensive. You may not need it in a Redux application either, but in large project you may often have very big deeply nested json objects, in that case Immutable.js is extremely useful.

answered Apr 19, 2017 at 23:29

prog

1503 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sulthan · Accepted Answer · 2017-04-19 21:32:21Z

1

Immutable has nothing to do with Redux or Flux.

You can use Flux and Redux without Immutable and you can use Immutable without Flux and Redux.

Immutable helps promoting a good programming style based on immutable data structures. That's all. Such a programming style goes very well with functional programming and with React.

Immutable is not the only framework out there doing the same. Javascript has its own Object.freeze method that makes an object immutable without additional containers. You can also use icepick and others.

answered Apr 19, 2017 at 21:32

Sulthan

130k23 gold badges223 silver badges277 bronze badges

4 Comments

aLex Over a year ago

But it's useless since you can't use setState with an Immutable object.

Sulthan Over a year ago

@aLex Why do you think you cannot use setState with an immutable object?

aLex Over a year ago

Because it doesn't work unless I convert it back to a javascript object with toJS().

Sulthan Over a year ago

What exactly does not work? React does not care what you save into state. Please update the question with code that does not work.

Collectives™ on Stack Overflow

Using Immutable.js without Flux or Redux

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related