explicitly cast initialState in docs examples

[phryneas]

see #826 and #735 - copying from the latter why this is neccessary:

This is a TypeScript "feature" that is a bit unfortunate and that I've noticed in recent versions:

function identity<T>(t: T) {return t} type SliceState = { state: "loading" } | { state: "finished"; data: string }; let initialState: SliceState = { state: "loading" }; // is inferred as { state: "loading"; } const derivedValue = identity(initialState)

TS actually does some code flow analysis and sometimes "tightens" types that you yourself declared wider.

Doing

const initialState = { state: "loading" } as SliceState;

would work as well here, as it is an implicit cast.

We might need to check our docs for this in a few places.

Originally posted by @phryneas in #735 (comment)

[netlify]

Deploy preview for redux-starter-kit-docs ready!

Built with commit 2a22180

https://deploy-preview-827--redux-starter-kit-docs.netlify.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2a22180:

Sandbox	Source
Vanilla	Configuration
Vanilla Typescript	Configuration
rsk-github-issues-example	Configuration

[msutkowski]

LGTM. I'm also doing this same thing in the rtk-query examples already 👍

[phryneas]

completely forgot to merge this one 🤦

[polaroidkidd]

quick question: does this mean that if I declare my state as suggested I'll have to declare every possible state permutation?

[phryneas]

@polaroidkidd only if you want your state to accept only very specific shapes.
If you are content with { state: string; data?: string };, just use that.
But if you want data to only be accessible when state is "finished", you'd need to go for a union type. But that's nothing redux-specific at all, that's just TypeScript.

[polaroidkidd]

I'm aware that my following question is typescript specific, but I'm banking on @phryneas's generosity here ^^

I have the following code:

import { createSlice, PayloadAction } from "@reduxjs/toolkit"; export type ErrorSlice = | { showErrorModal: false } | { showErrorModal: true; errorTitel: string; errorBody: string }; const initialState = { showErrorModal: false, errorBody: null, errorTitel: null } as ErrorSlice; const { reducer: uiErrorReducer, actions: uiErrorActions } = createSlice({ name: "ui/error", initialState: initialState, reducers: { hideErrorModal: () => initialState, showErrorModal: ( state, action: PayloadAction<{ errorTitel: string; errorBody: string }> ) => ({ showErrorModal: true, ...action.payload }), }, }); export { uiErrorActions, uiErrorReducer };

I am wondering why TS isn't throwing an error for declaring

const initialState = { showErrorModal: false, errorBody: null, errorTitel: null } as ErrorSlice;

as the ErrorSlice type does not declare a permutation that allows for showErrorModal: false and errorBody: null & errorTitle: null. I can even set the error title/Body to contain strings ("example"), but the initial state is accepted as is.

What am I missing here? 🤔

[phryneas]

@polaroidkidd interfaces only describe a shape that should be matched, but don't restrict other properties from being present. If you want that, you have to

export type ErrorSlice = | { showErrorModal: false; errorTitel: never; errorBody: never } | { showErrorModal: true; errorTitel: string; errorBody: string };

[polaroidkidd]

oh wow! I wasn't aware of the never property. This will be super useful! Thank you very much!

[danielo515]

Doesn't have typescript a way to define "exact" objects? Flow has this notation {| prop: boolean |} which will not allow extra props, just that.

[phryneas]

No. https://www.typescriptlang.org/docs/handbook/type-compatibility.html#a-note-on-soundness

[danielo515]

Thanks for the link.
What a shame