React Component становится пустым, когда обернут в StoreProvider

Question

Привет, у меня есть очень простой реагирующий компонент, который работает

import React, {Fragment} from 'react';

export default function App() : JSX.Element {
    return (
        <Fragment>
            <h1>Rick and Morty</h1>
            <p>Pick your favorite episode!!!</p>
        </Fragment>
    )
}

Я отрисовываю это, используя RenderDOM.render(<App/>, document.getElementById('root'))

Теперь я изменил свой метод рендеринга на

import {StoreProvider} from './Store';
import App from './App';
ReactDOM.render(<StoreProvider><App/></StoreProvider>, document.getElementById('root'););

и My Store выглядит как

import React, {useReducer} from 'react';
interface IState {
    episodes: string[],
    favorites: string[]
};

interface IAction {
    type: string,
    payload: any
};

const initialState : IState = {
    episodes: [],
    favorites: []
};
export const Store = React.createContext<IState | any>(initialState);
function reducer(state: IState, action: IAction): IState {
    switch(action.type) {
        case 'FETCH_DATA':
            return state;
        default:
            return state;
    }
}
export function StoreProvider(props: any): JSX.Element {
    const [state, dispatch] = useReducer(reducer, initialState);
    return <Store.Provider value={{state, dispatch}}>{props.childen}</Store.Provider>
}

Как только я это сделаю, мой реагирующий компонент погаснет, и в консоли разработчика или на webpack-dev-server не будет сообщений об ошибках или чего-либо еще.

Почему это go пусто? Я не могу устранить эту проблему, потому что нет абсолютно никаких сообщений об ошибках

Мой репозиторий здесь https://github.com/abhsrivastava/react-rick-and-morty

Answer 1

Разве это не должно быть props.children вместо props.childen в функции рендеринга StoreProvider?

Вы могли бы добавить типы реквизита в StoreProvider, чтобы предотвратить это

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

Надеюсь, это помогло:)