Как определить свойства и типы Typescript для хранилища React Action Hook Store - PullRequest
Новая
       81

Как определить свойства и типы Typescript для хранилища React Action Hook Store

1 голос
/ 05 апреля 2019

Я создаю хранилище управления состоянием реагирования с использованием хуков, после описанного Таннером Линсли здесь описанного «шаблона хуков действия».

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

'Свойство' useStore 'не существует для типа' () => {Provider: ({initialValue, children}: {initialValue ?: {}; children: any;}) => Элемент;useStore: () => any;} 'ts (2339)

Я протестировал его в простой реакции, и он работает, так что это проблема определения типа или свойства в Typescript.

Общее хранилище создано (без ошибок машинописи): 

interface IState {}

const initialState: IState = {}

export default function newStore() {
  const context = React.createContext<IState>(initialState)

  const Provider = ({ initialValue = {}, children }): JSX.Element => {
    const [state, setState] = useState(initialValue)
    const contextValue = useMemo(() => [state, setState], [state])

    return <context.Provider value={contextValue}>{children}</context.Provider>
  }
  const useStore = () => useContext(context)

  return { Provider, useStore }
}

Хуки действий магазина (ошибка показана для обоих случаев использования хранилища): 

import store from "./makeStore";

export const useGalleryOpen = () => {
  const [{ galleryOpen }] = store.useStore()
  return galleryOpen
}

export const useGalleryToggle = () => {
  const [_, setState] = store.useStore()
  return () =>
    setState(prev => ({
      ...prev,
      galleryOpen: !prev.galleryOpen,
    }))
}

Любой совет с благодарностью.

1 Ответ

1 голос
/ 09 апреля 2019

Ключевым моментом проблемы (она видна в вашей изолированной программной среде кода, и я отредактировал ваш вопрос, чтобы включить ее) является определение store.

Вы определяете store как import store from "./makeStore";

То есть store - это функция, которая при вызове возвращает объект, содержащий 

{
  Provider: any;
  useStore(): any;
}

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

Все идет хорошо, заменяя 

store.useStore()

на 

store().useStore()

Позвольте мнезнать, если вам нужна дополнительная помощь ?

...