3

While running through one of Redux's tutorials, I ran across this warning: "Redux actions and state should only contain plain JS values like objects, arrays, and primitives. Don't put class instances, functions, or other non-serializable values into Redux!"

Does this mean that an array of class instances shouldn't be held in redux? For example, say I have a Chat app. Say I have a Conversation class that holds an array of participants, array of messages, an id, etc. Can I add to redux an array of Conversation instances?

If not, why? Should a React application's data model not rely much on classes and inheritance?

3 Answers 3

5

It's technically possible to do that, but you should not add class instances to the Redux state!.

Both React and Redux expect that you're using plain JS objects, arrays, and primitives for your state - not class instances. They also expect that you update that data immutably.

Your data should also definitely not rely on inheritance.

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

12 Comments

Thanks Mark. Why is it that the data model shouldn't rely on inheritance? Do you know of any resources/blogs that would help me better understand how to design the framework for a large app's data?
Multiple reasons. Per that second link, React expects data to be updated immutably. Class instances are normally mutated, so that's incompatible. Second, the React world in general assumes that you're working with plain data. React apps don't normally write "model classes" overall. So, no model classes, no inheritance. Doubly so for Redux.
Isn't this very restrictive? Am I really limited to using plain objects and arrays in my redux state? There's a whole world of other abstract data types which I might want to use.
Yes to all three: it is restrictive, you are limited to plain objects and arrays, and that's intentional.
React isn't. And react isn't concerned with immutability
|
1

To quote redux docs (ref):

If you are okay with things like persistence and time-travel debugging potentially not working as intended, then you are totally welcome to put non-serializable items into your Redux store. Ultimately, it's your application, and how you implement it is up to you. As with many other things about Redux, just be sure you understand what tradeoffs are involved.

That said, when you use classes as value objects (which means they are immutable) and with no inheritance, it doesn't go against the spirit of react and it seems fine.

However, it's not clear from the docs what "can break the ability to persist and rehydrate the contents of a store" means. For example, when you store instance of such class with reducer and then retrieve it with selector, is it transformed (I mean serialized and deserialized) somehow on the way? If not, then it's fine as it's usable. If yes, serialize/deserializer wouldn't know how to (de)serialize it as JS doesn't have any general Serializable interface to implement which serializer could follow. In such way, using classes wouldn't be usable.

Comments

-1

The plain JS values are simply a Plain Old JavaScript Objects (POJO):

var obj = {};// this is a POJO
var obj = new Object();// this is POJO

What is not a PJOJ, is something like this:

var Obj = function(welcome_text) {
  this.welcome_text = welcome_text;
}
var c = new Obj("Welllllcome!!!!");// this is not a POJO !

I folowed up the docs of redux, and they gived an example in this link. They explain that, for example, you can not have new Date() as a params for your actions/states, beacause the new Date() will return a non POJO ! Instead, you should do new Date().toISOString() wich will return a string.

So, to respond to your direct question (Can I add to redux an array of Conversation instances?)

YES YOU CAN.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.