Storing objects with prototype functions in Redux state
<p>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.</p>

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

<p>So for example I have the following model:</p>

<pre><code>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    
  }
}
</code></pre>

<p>The object is added to the store by issuing the following actionCreator:</p>

<pre><code>export function addPerson(args = {}) {
  return (dispatch) =&gt; {
    dispatch({
      type: 'ADD_PERSON',
      obj: new Person(args)
    });
  };
}
</code></pre>

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

<p>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.</p>

<p>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)</p>

<p><strong>Edit:</strong> </p>

<p>I should add that I <strong>only</strong> mutate the object state through the reducers. I am careful to not mutate state elsewhere in the application.</p>