Zustand通用模态Store优化：实现open函数无参调用

要让open函数支持无参调用，只需调整类型定义和函数参数即可，具体修改如下：

1. 修改类型定义 #

将ModalStoreState中的open方法参数设为可选：

export type ModalStoreState<T> = {
    isOpen: boolean
    props: T | undefined
    open: (props?: T) => void // 添加?让参数变为可选
    close: () => void
}

2. 调整Store实现 #

给泛型T设置默认类型为undefined，方便无props场景的模态创建，同时open函数自动兼容可选参数：

export const createModalStore = <T = undefined>() =>
    create<ModalStoreState<T>>()((set) => ({
        isOpen: false,
        props: undefined,
        open(props) {
            set((state) => ({
                ...state,
                props,
                isOpen: true,
            }))
        },
        close() {
            set((state) => ({
                ...state,
                isOpen: false,
                props: undefined,
            }))
        },
    }))

3. 调用示例 #

现在可以直接无参调用open方法，无需传入undefined：

const reviewModalStore = createModalStore()
reviewModalStore.getState().open() // 直接调用，无需传参

如果模态需要props，依然可以正常传入参数：

type OrderProps = { orderId: number }
const orderModalStore = createModalStore<OrderProps>()
orderModalStore.getState().open({ orderId: 1001 })

内容的提问来源于stack exchange，提问作者hungdoansy