Where to write mutable and where immutable logic with @redux/toolkit?

Question

I had the exact same problem as in this question here. With this code:

set(state, action) {
  const { id, value, field } = action.payload
  const range = state.ranges.find(r => r.id === id)
  range[field] = new Date(value) //action.payload.field can be either "start" or "end"
}

Answer to question above was to not put non-serializable values in state.

Does it mean I can't have an array of objects that look like this { id, start, end } in my state? If that's the case (which I hope it is not) how do I store it?

If I can't store it otherwise do I need to just write immutable logic for such cases?

An array of objects is serializable, promises, and functions aren't. — Dennis Vash, Jan 15 '21 at 12:51

score 1 · Accepted Answer · answered Jan 15 '21 at 16:09

1

You can totally have objects in state, and Redux Toolkit's use of Immer allows you to "mutate" those objects.

My answer in the other issue was pointing out that Date objects are not inherently serializable, so you shouldn't be saving them in the Redux state.

answered Jan 15 '21 at 16:09

markerikson

63,178
10
141
157

Thanks, I realized way to late that I'm storing Date instances in state – Alex l. Jan 17 '21 at 06:56

Where to write mutable and where immutable logic with @redux/toolkit?

1 Answers1