Question

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

Answer 1

使用Kotlin / JS，您不需要＆＃34;图书馆＆＃34;在通常意义上，您只需要告诉编译器如何使用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库。

Answer 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

看到示例项目

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

2 个答案: