如何为 React Action Hook Store 定义 Typescript 属性和类型

Question

在 Tanner Linsley here 描述的 'Action Hooks pattern' 之后，我正在使用挂钩创建一个反应状态管理存储。

我正在学习 Typescript 并尝试使用它创建此项目，但在调用自定义挂钩以使用商店时一直运行出错：

'Property 'useStore' does not exist on type '() => { Provider: ({ initialValue, children }: { initialValue?: {}; children: any; }) => Element; useStore: () => any;}' ts(2339)

我在简单的 React 中对其进行了测试并且它正在运行，所以它是 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 }
}

Store Action Hooks（显示了两个 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,
    }))
}

非常感谢任何建议。

Answer 1

问题的关键点（它在您的代码沙箱中可见，我已经编辑了您的问题以包含它）是 store 定义。

您将店铺定义为import store from "./makeStore";

所以 store 是一个函数，当被调用时，return 是一个包含

的对象

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

当您将它与 store.useStore() 一起使用时，您就犯了错误。 store 是一个函数，其中 return 值是一个包含 useStore 函数的对象。

更换一切顺利

store.useStore()

和

store().useStore()

如果您需要更多帮助，请告诉我

如何为 React Action Hook Store 定义 Typescript 属性和类型

How to define Typescript properties and types for a React Action Hook Store

typescript

reactjs

react-context

react-state-management

react-hooks