How do I work with Redux/React in Kotlin.js?

Question

I want to work with Redux/React in Kotlin.js, but I only found Redux/React libraries for Android (such as redux-kotlin).

score 4 · Accepted Answer · answered Oct 06 '17 at 08:53

With Kotlin/JS you don't need "libraries" in a usual sense, you just need to tell compiler how to work with React. In order to do this, you should write a set of external declarations and may be annotate them with special JS platform annotations (it' much like writing d.ts file in TypeScript). See these links: JavaScript interop, Module systems.

You can look at following project: kotlin-wrappers. However, author claims it's in a very early stage. Another useful project is kotlin-fullstack-sample, which shows how to use React with Kotlin.

Also, you can generate React declarations for Kotlin using ts2kt tool. It's also a bit incomplete and does not always produce proper declarations, you'll have to manually fix errors.

Finally, you can fall back to dynamic type. It's the fastest option to start using React, but with dynamic you won't get any benefit from Kotlin type system.

Note that with Kotlin you can't use JSX. You can use type-safe builders instead, for example, kotlinx.html library.

I am aware that it's possible to write a React wrapper. But I would prefer not to do it myself. I would rather use a library like clojurescript's Re-frame or scala's Diode. — dilvan, Oct 06 '17 at 11:03
I ended up calling the react.js library directly. It means some work to write the interface, but Kotlin is very good at javascript interoperation. — dilvan, Oct 22 '17 at 15:00

score 1 · Answer 2 · answered Jun 22 '18 at 18:21

You need to write type wrappers for 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
}

And for 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
}

in order to use them from your kotlin code. You can see example project here https://github.com/ShyykoSerhiy/kotlin-react-redux-material

How do I work with Redux/React in Kotlin.js?

2 Answers2