在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,
}))
}
非常感谢任何建议。