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.

Why can't your validation functions live outside the class? I don't see the benefit by having each class have its own validation functions when they could easily be offloaded into a set of pure functions. — azium
– azium, Commented Apr 25, 2016 at 20:47
I guess conceptually it makes more sense to me to group them together. And this way the model is able to "know" if it is valid. — eh0908
– eh0908, Commented Apr 25, 2016 at 20:59
To answer your question (although it seems like you know this already), yes this is considered to be breaking convention/best practice. Redux recommends you only dispatch plain JS objects — aray12
– aray12, Commented Apr 25, 2016 at 22:26
Your model can know if it's valid simply by passing some data to validation function that is agnostic to your class. My suggestion is to think in terms of primitives all the time. If you need a function extract it somewhere common and forget about it. This way you can serialize, reinstate and stay super DRY. further reading drboolean.gitbooks.io/mostly-adequate-guide/content — azium
– azium, Commented Apr 26, 2016 at 0:00

Edgar · Accepted Answer · 2019-08-12 15:21:08Z

4

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.

edited Aug 12, 2019 at 15:21

Edgar

7,00811 gold badges38 silver badges75 bronze badges

answered Apr 26, 2016 at 15:44

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

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

Comments

Truong Nguyen · Accepted Answer · 2019-10-10 12:09:16Z

0

so i think my code help someone need to find a way can be solve transform class to function by difficult function doesn't support protypes let some my code can fix them and easy with

import React from 'react'
import PropTypes from 'prop-types'

const Link = ({ active, children, onClick }) => (
    <button
       onClick={onClick}
       disabled={active}
       style={{
           marginLeft: '4px',
       }}
    >
      {children}
    </button>
)

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

export default Link

answered Oct 10, 2019 at 12:09

Truong Nguyen

1

Collectives™ on Stack Overflow

Storing objects with prototype functions in Redux state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related