Why is it bad practice to use Symbols in actions?

user_3738171 0
Viewed 144

I have some action types in my app that I've declared like this:

export const TICTACTOE_PLAY = Symbol();
export const TICTACTOE_RESET = Symbol();

Then I wrote some action dispatchers like this:

export const play = coordinates => ({ type: TICTACTOE_PLAY, coordinates });
export const reset = () => ({ type: TICTACTOE_RESET });

I prefer symbols over strings because they are primitive, I believe them to be faster to compare than strings (in the reducer), and they can't collide with each other.

However in the Redux style guide I read that this was an anti-pattern. However, I can't fully understand this sentence:

This ensures that capabilities such as debugging via the Redux DevTools will work as expected. It also ensures that the UI will update as expected.

Why would non-serializable values like symbols prevent Redux DevTools or UI to work as expected? I understand that it may not help debugging, I understand that the state has to be serializable (for use cases like server-side rendering) but I don't get why actions have to be serializable.

react-redux redux reactjs javascript
1 Answers

In the particular case you're asking about of why it might break Redux DevTools, there seems to be a section in the FAQ about this.

As with state, serializable actions enable several of Redux's defining features, such as time travel debugging, and recording and replaying actions. Using something like a Symbol for the type value or using instanceof checks for actions themselves would break that.

user_8921680
Related