Typescript React UseReducer Ошибка типа на значении провайдера

Question

Я в настоящее время сталкиваюсь с ошибками, заставляющими моего провайдера работать с использованием React Context API в Typescript, я получаю следующую ошибку,

Type '{ state: { hasEnterPressed: boolean; searchQuery: string; }; dispatch: Dispatch<stringAction>; }' 
is missing the following properties from type '{ hasEnterPressed: boolean; searchQuery: string; dispatch: 
(state: { hasEnterPressed: boolean; searchQuery: string; }, action: stringAction) => 
{ hasEnterPressed: boolean; searchQuery: string; }; }': hasEnterPressed, searchQuery  TS2739

    50 | 
    51 |     return (
  > 52 |         <SearchContext.Provider value={value}>
       |                                 ^
    53 |             {props.children}
    54 |         </SearchContext.Provider>
    55 |     )

Я считаю, что это связано с конструкцией моего CreateContext вызов, который является причиной, по которой у меня могут возникнуть проблемы. Я попытался создать типы интерфейса, но я все еще получаю ту же ошибку.

import React, {useReducer, createContext, Dispatch}  from "react";


export interface Action {
    type: string
}

export interface stringAction extends Action {
    payload: string
}

export interface reducerState {
    hasEnterPressed: boolean
    searchQuery: string,
}


const reducer = (state: reducerState, action: stringAction) => {
    switch(action.type) {
        case "UPDATEKEYPRESS":
            return {
                ...state,
                hasEnterPressed: false
            };
        case "UPDATESEARCHQUERY":
            return {
                ...state,
                searchQuery: action.payload
            }
        default:
            throw new Error();
    }
}

const initalState: reducerState = {
    hasEnterPressed: false,
    searchQuery : '',
}


export const SearchContext = createContext<reducerState>(initalState);

export const SearchProvider: React.FC = (props) => {

    const [state, dispatch] = useReducer(reducer, initalState)

    const value = {state, dispatch}

    return (
        <SearchContext.Provider value={value}>
            {props.children}
        </SearchContext.Provider>
    )
}

export default SearchProvider;

Answer 1

value, который вы передаете, является объектом {state, dispatch}, в то время как createContext<reducerState> заставляет провайдера ожидать, что он будет reducerState.

Вам необходимо либо изменить тип контекста на

interface SearchContextValue {
  state: reducerState; 
  dispatch: Dispatch<ReducerAction<typeof reducer>>
}

export const SearchContext = createContext<SearchContextValue>({
 state: initalState, 
 dispatch: () => {} // fake, but it is not possible to provide at this point 
});

, либо, если вам не нужно передавать диспетчерскую передачу, передать состояние в качестве значения

<SearchContext.Provider value={state}>

Обратите внимание, что хорошей практикой является использование заглавных букв в именах типов, в противном случае трудно guish различать их с именами переменных.