Storing objects with prototype functions in Redux state

Question

Is it considered bad practice to store classes in the state? I've read that the state should be easily serializable objects and classes break this convention.

I'm creating a web application that uses React/Redux with a set of backing models to collect information from the user.

So for example I have the following model:

class Person {
  constructor(params = {}) {
    this.firstName = params.firstName || '';
    this.lastName = params.lastName || '';
    this.gender = params.gender || '';
    this.dateOfBirth = params.dateOfBirth || '';
    this.stateOfResidence = params.stateOfResidence || '';
    this.email = params.email || '';
  }
  validateField(args) {
    // remove for brevity
  }
  valid(args) {
    // remove for brevity    
  }
}

The object is added to the store by issuing the following actionCreator:

export function addPerson(args = {}) {
  return (dispatch) => {
    dispatch({
      type: 'ADD_PERSON',
      obj: new Person(args)
    });
  };
}

The appropriate person reducer sticks it into the state so I can get at it from the rest of the application.

This way when I grab the object from the state I can run it's validate and valid prototype functions to see if the model is valid and react appropriately.

Does this break React/Redux convention? What would be another way to approach this problem? What are the potential problems I might run into down the road with the above approach? Right now can't foresee any problems... but I also don't have much experience with React/Redux (~4 months)

Edit:

I should add that I only mutate the object state through the reducers. I am careful to not mutate state elsewhere in the application.

Answer 1

Yes, it's generally considered an anti-pattern, because it breaks the ability to do things like time-travel debugging (one of Redux's core selling points). See the Redux FAQ at for further details.

If you do want to have more of an object-like facade over your plain data, you may want to look into something like redux-orm.