2

My code :

import { createContext, ReactNode, useReducer } from "react";

interface children {
    children: ReactNode
}

export const Store = createContext(null);

const initialState = {
    cart: {cartItems:[]}
}

function reducer(state: any, action: any){
    switch(action.type){
        case 'CART_ADD_ITEM': {
            const newItem = action.payload;
            const existItem = state.cart.cartItems.find(
                (item: any) => item.slug === newItem.slug
            );
            const cartItems = existItem 
            ? 
            state.cart.cartItems.map((item:any)=>
                item.name === existItem.name ? newItem : item)
            :
            [...state.cart.cartItems, newItem];
          return {...state, cart: {...state.cart, cartItems}}
        }
        default: return state
    }
}

export function StoreProvider({children}: children){
    const [ state, dispatch ] = useReducer(reducer, initialState)
    const value = {state, dispatch};
    return <Store.Provider value={value}>{children}</Store.Provider>
}

The error is at the very bottom where I've assigned value={value}: Type '{ state: any; dispatch: Dispatch; }' is not assignable to type 'null'.ts(2322) index.d.ts(329, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps'

I'm aware createContext value shouldn't be null but changing it to anything else results in an eror as well.

I tried reading the official typesript / context API documentation but the examples they provided didn't help me.

peter92a
  • 27
  • 6

1 Answers1

0

I believe it is missing the type for the state and action in reducer function.

An idea that I like is to create a type for the state like this:

interface IReducerState = {
  cart: {
   cartItems: string[];
  }
}

And for actions create like this:

type ReducerActions = {
 type: "CART_ADD_ITEM"
 payload: string
}

And now pass those created typings in reducer function:

function reducer(state: IReducerState, action: ReducerActions) {
  //...
}
Gustavo Soares
  • 1
  • that's definitely great advice on avoiding ''any'' , i also added dispatch: (() => undefined) as Dispatch, to my initial state but the problem persists – peter92a Feb 04 '23 at 19:45