我想在Kotlin.js中使用Redux / React,但我只找到了适用于 Android 的 Redux/React 库(例如redux-kotlin)。
2 回答
使用 Kotlin/JS,您不需要通常意义上的“库”,您只需要告诉编译器如何使用 React。为此,您应该编写一组external
声明,并可能使用特殊的 JS 平台注释对其进行注释(这很像d.ts
在 TypeScript 中编写文件)。请参阅以下链接:JavaScript 互操作、模块系统。
您可以查看以下项目:kotlin-wrappers。但是,作者声称它处于非常早期的阶段。另一个有用的项目是kotlin-fullstack-sample,它展示了如何将 React 与 Kotlin 一起使用。
此外,您可以使用ts2kt工具为 Kotlin 生成 React 声明。它也有点不完整,并不总是产生正确的声明,您必须手动修复错误。
最后,您可以回退到动态类型。这是开始使用 React 的最快选择,但使用动态您不会从 Kotlin 类型系统中获得任何好处。
请注意,对于 Kotlin,您不能使用 JSX。您可以改用类型安全的构建器,例如kotlinx.html库。
您需要为 redux 编写类型包装器:
external interface ReduxState
external class Store {
@JsName("getState")
fun getState(): ReduxState
@JsName("dispatch")
fun dispatch(action: dynamic)
}
@JsModule("redux")
@JsNonModule
external object Redux {
@JsName("createStore")
fun <ST : ReduxState> createStore(reducer: (ST, dynamic) -> ReduxState,
initialState: ST,
enhancer: (dynamic) -> ST = definedExternally)
: Store
@JsName("applyMiddleware")
fun applyMiddleware(vararg middleware: () -> (dynamic) -> dynamic)
: ((dynamic) -> Unit, () -> ReduxState) -> Unit
@JsName("compose")
fun compose(vararg funcs: dynamic): (dynamic) -> dynamic
}
对于 react-redux
@file:JsModule("react-redux")
package ktypings.redux
import react.RClass
import react.RProps
import react.ReactElement
@JsName("connect")
external fun <P : RProps, ST : ReduxState> connect(
mapStateToProps: ((ST, P) -> P)? = definedExternally,
mapDispatchToProps: (((dynamic) -> Unit, P) -> P)? = definedExternally
): (Any) -> RClass<P>
@JsName("Provider")
external val Provider: RClass<ProviderProps>
external interface ProviderProps : RProps {
var store: Any
}
为了从您的 kotlin 代码中使用它们。您可以在此处查看示例项目https://github.com/ShyykoSerhiy/kotlin-react-redux-material