时间戳

首页 > 解决方案 > 如何为 React Action Hook Store 定义 Typescript 属性和类型

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

问题描述

在Tanner Linsley在这里描述的“动作挂钩模式”之后，我正在使用挂钩创建一个反应状态管理存储。

我正在学习 Typescript 并尝试使用它创建此项目，但在调用自定义挂钩以使用商店时不断遇到错误：

'() => { Provider: ({ initialValue, children }: { initialValue?: {}; children: any; }) => Element; 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 }
}

存储操作挂钩（两个 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,
    }))
}

非常感谢任何建议。

标签： reactjstypescriptreact-hooksreact-contextreact-state-management

解决方案

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

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

一个函数也是如此store，当它被调用时，它会返回一个包含

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

当你消费它时，store.useStore()你就犯了错误。store是一个函数，它的返回值是一个包含该useStore函数的对象。

一切顺利更换

store.useStore()

和

store().useStore()

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

推荐阅读