React/TypeScript：Context API 状态下的联合类型

Question

TypeScript does not seem to be recognizing that property state.recipes do exist when I use the state in some other component, this would be the case if YummlyState is the type of RecipesState . I suspect the YummlyState to always be the type of InitialState because that is the type it will have initially because of the initial state being set.

Also to include, is there anything else you notice about this Context which you think should be different?

Many thanks!

import React, {
    createContext,
    Dispatch,
    PropsWithChildren,
    ReactElement,
    Reducer,
    useContext,
    useReducer,
} from 'react'

//  Recipe
export type Recipe = {
    id: number
    title: string
    image: string
    readyInMinutes: number
    diets: string[]
    pricePerServing: number
    servings: number
}

// Response
export type SpoonacularResponse = {
    number: number
    offset: number
    results: Recipe[]
    totalResults: number
}

// Yummly State
type StatusUnion = 'resolved' | 'rejected' | 'idle' | 'pending'

type InitialState = {
    status: StatusUnion
}

type SingleRecipeState = InitialState & {
    recipe: Recipe
}

type RecipesState = InitialState & {
    recipes: Recipe[]
}

type ErrorState = InitialState & {
    error: unknown
}

type YummlyState = InitialState | SingleRecipeState | RecipesState | ErrorState

// Action Union Type for the reducer
type Action =
    | { type: 'pending' }
    | { type: 'singleRecipeResolved'; payload: Recipe }
    | { type: 'recipesResolved'; payload: Recipe[] }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    | { type: 'rejected'; payload: unknown }

// The initial state
const initialState: YummlyState = {
    status: 'idle',
}

//  The Reducer
function yummlyReducer(state: YummlyState, action: Action): YummlyState {
    switch (action.type) {
        case 'pending':
            return {
                status: 'pending',
            }
        case 'singleRecipeResolved':
            return {
                ...state,
                status: 'resolved',
                recipe: action.payload,
            }
        case 'recipesResolved':
            return {
                ...state,
                status: 'resolved',
                recipes: action.payload,
            }
        case 'rejected':
            return {
                ...state,
                status: 'rejected',
                error: action.payload,
            }
        default:
            throw new Error('This should not happen :D')
    }
}

type YummlyContextType = {
    state: YummlyState
    dispatch: Dispatch<Action>
}

const YummlyContext = createContext<YummlyContextType>({
    state: initialState,
    dispatch: () => {},
})

YummlyContext.displayName = 'YummlyContext'

// eslint-disable-next-line @typescript-eslint/ban-types
function YummlyProvider(props: PropsWithChildren<{}>): ReactElement {
    const [state, dispatch] = useReducer<Reducer<YummlyState, Action>>(
        yummlyReducer,
        initialState
    )
    const value = { state, dispatch }
    return <YummlyContext.Provider value={value} {...props} />
}

function useYummlyContext(): YummlyContextType {
    const context = useContext(YummlyContext)
    if (!context) {
        throw new Error(`No provider for YummlyContext given`)
    }
    return context
}

export { YummlyProvider, useYummlyContext }

Answer 1

When dealing with a union, you will not be able to access a property such as state.recipes unless that property has been declared on ALL members of the union. There are essentially two ways that you can deal with this type of thing:

1. Check that the property key exists before trying to access it. If it exists, we know it is a valid value and not undefined .

2. Include a base interface in the YummlyState union which says that all of the keys of any of the members can be accessed, but their values might be undefined .

Guarding Properties

Without changing your type definitions, the simplest thing you can do is use a type guard to see if a property exists. Based on your union, typescript knows that if there is a property recipes , it must be of type Recipe[] .

const Test = () => {
    const {state, dispatch} = useContext(YummlyContext);
    if ( 'recipes' in state ) {
        // do something with recipes
        const r: Recipe[] = state.recipes;
    }
}

Declaring Optional Properties

The base interface that we want to include in our union looks like this:

interface YummlyBase {
    status: StatusUnion;
    recipe?: Recipe;
    recipes?: Recipe[];
    error?: unknown;
}

status is required, but all other properties are optional. This means that we can always access them, but they might be undefined . So you need to check that a particular value is not undefined before using it.

We are able to destructure the object, which is nice:

const base: YummlyBase = { status: 'idle' };

const {status, recipe, recipes, error} = base;

Using just the YummlyBase alone is ok, but it doesn't give us all of the information. It's better if YummlyState is the base and a union of specific members.

type YummlyState = YummlyBase & (InitialState | SingleRecipeState | RecipesState | ErrorState)

Discriminating Unions

Each of your scenarios has a different string literal for status (well, mostly), but we haven't made use of that fact. Discriminating unions is a way to narrow the type of the object based on the value of a string property like status .

You are already doing this with your Action union type. When you switch based on action.type , it knows the correct type for action.payload .

This can be extremely helpful in some situations. It is less helpful here because the status resolved is used by both SingleRecipeState and RecipesState , so you still need additional checking. That's why I've put this option last.

type InitialState = {
  status: 'idle' | 'pending';
}

type SingleRecipeState = {
  status: 'resolved';
  recipe: Recipe
}

type RecipesState = {
  status: 'resolved';
  recipes: Recipe[];
}

type ErrorState = {
  status: 'rejected';
  error: unknown;
}

type YummlyState = InitialState | SingleRecipeState | RecipesState | ErrorState

type StatusUnion = YummlyState['status'];

const check = (state: YummlyState) => {
  if (state.status === 'rejected') {
    // state is ErrorState
    state.error;
  }
  if ( state.status === 'resolved' ) {
    // state is RecipesState or SingleRecipeState
    state.recipe; // still an error because we don't know if it's single or multiple
  }
}

Playground Link