Using ImmutableJS and React setState

Question

I'm currently experiencing problems with getting ImmutableJS and React to work properly. This is not using Redux, therefore I am updating state within the component.

The problem is after I update state, my getter properties are missing on the next rerender causing an Error. Why does setState strip these methods away?

Am I not using ImmutableJS correctly? Is ImmutableJS only intended to be with Redux?

const AssociateRoleLocationStateFactory = RecordFactory<AssociateRoleLocationState>({
  isEditing: false
})

export default class IAssociateRoleLocation extends React.Component {
  constructor(props) {
    super(props)

    this.state = new AssociateRoleLocationStateFactory({
      isEditing: false
    })

    // `this.state` has `.get` method to retrieve properties
    console.log(`initial state:`, this.state) // Record {_map: Map} 
  }

  toggleEditing() {
    let nextState = this.state.set('isEditing', !this.state.get('isEditing'))

    // `nextState` has `.get` method to retrieve properties
    console.log(`next state:`, nextState) // Record {_map: Map}

    this.setState(nextState)
  }

  render() {
    console.log(this.state) // {_map: Map} // Its missing `.get` method on second render
    let isEditing = this.state.get('isEditing')

    return (
      <div className="site-single-column">
        {isEditing ? (
          <div>
            Is Editing!!
          </div>
        ) : (
          <button style={{ alignSelf: 'center' }} onClick={this.toggleEditing}>
              Toggle
            </button>
        )}
      </div>
    )
  }
}

yujingz · Accepted Answer · 2018-06-18 17:00:53Z

2

Currently, React only supports plain js object as the state. You can wrap whatever you want in another key/value layer like

constructor(props) {
  super(props);
  this.state = {
    payload: new AssociateRoleLocationStateFactory({
      isEditing: false
    })
  }
}

There are discussions around this going on like this: https://github.com/facebook/react/issues/3303

But before that, stay pure.

answered Jun 18, 2018 at 17:00

yujingz

2,4292 gold badges26 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Using ImmutableJS and React setState

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related