How to type redux state and selectors with readonly?

[mattg95]

Redux state is supposed to be immutable, so I've defined the state in my reducers like this

import { createReducer } from 'typesafe-actions';

const reducer = createReducer<Readonly<MyType>(defaultState)
    .handleAction(....

However, when I define a selector I want it to return the type without the Readonly modifier, so it's less verbose. Currently I do it with type casting like this:

import { createSelector } from 'reselect';

const selector = createSelector(state, (data) => data as MyType)

How do I do this without type casting the selector?

[EskiMojo14]

it's not possible without casting - though i'd argue that it would make sense to keep the readonly modifier as you're not meant to modify data that comes out of a selector.

[mattg95]

Many thanks @EskiMojo14, do you have any more explanation or links about this?

you're not meant to modify data that comes out of a selector.

[EskiMojo14]

you said it yourself:

Redux state is supposed to be immutable

even though you've selected it with a selector, it's still redux state, and still should be immutable. mutating state leads to unexpected behaviour, which is why Redux Toolkit uses Immer to actually freeze the state (meaning an error is thrown if mutation is attempted) and includes a middleware to track attempted mutations.