如何在 Kotlin.js 中使用 Redux/React？答案

【问题标题】：How do I work with Redux/React in Kotlin.js?如何在 Kotlin.js 中使用 Redux/React？
【发布时间】：2019-05-11 03:59:58
【问题描述】：

我想在Kotlin.js 中使用Redux/React，但我只找到了适用于Android 的Redux/React 库（例如redux-kotlin）。

【问题讨论】：

标签： reactjs kotlin redux kotlin-js

【解决方案1】：

使用 Kotlin/JS，您不需要通常意义上的“库”，您只需要告诉编译器如何使用 React。为此，您应该编写一组 external 声明，并可能使用特殊的 JS 平台注释对其进行注释（这很像在 TypeScript 中编写 d.ts 文件）。请参阅以下链接：JavaScript interop、Module systems。

您可以查看以下项目：kotlin-wrappers。但是，作者声称它处于非常早期的阶段。另一个有用的项目是kotlin-fullstack-sample，它展示了如何将 React 与 Kotlin 一起使用。

此外，您可以使用ts2kt 工具为 Kotlin 生成 React 声明。它也有点不完整，并不总是产生正确的声明，您必须手动修复错误。

最后，你可以回退到dynamic 类型。它是开始使用 React 的最快选择，但使用动态您不会从 Kotlin 类型系统中获得任何好处。

请注意，对于 Kotlin，您不能使用 JSX。您可以改用type-safe builders，例如kotlinx.html library。

【讨论】：

我知道可以编写一个 React 包装器。但我宁愿自己不做。我宁愿使用 clojurescript 的 Re-frame 或 scala 的 Diode 之类的库。
我最终直接调用了 react.js 库。写接口意味着一些工作，但是Kotlin非常擅长javascript互操作。
这一切已经改变，现在完全过时了。

【解决方案2】：

你需要为 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

【讨论】：