I am currently fiddling with KotlinJS and React. I...

# javascript

[Hildebrandt Tobias]

I am currently fiddling with KotlinJS and React.
I wanted to use the State and Context functionality, but since I am unexperienced in
JS and React native I don't understand how it's supposed to work in KotlinJS.
This is the tutorial I tried to follow: https://www.basefactor.com/global-state-with-react

I cannot wrap my head around how I can use the dispatch and reducer to modifly the context.
What I tried:

val authContext = createContext<AuthJWT?>(null)
val authDispatch = createContext<Unit>()
val authReducer: Reducer<AuthJWT?, AuthJWT> = { state, action ->
    action
}

object AuthStore {
    fun setToken(jwtToken: AuthJWT) {
        // ??
    }
}

[Hildebrandt Tobias]

I slowly make progress (I think).

Currently looking at this and wondering how I implement the nested children like in the example here: https://react.dev/learn/scaling-up-with-reducer-and-context

val authContext = createContext<AuthJWT?>(null)
val authDispatch = createContext<Dispatch<AuthJWT>>()
val authReducerTask: Reducer<AuthJWT?, AuthJWT> = { state, action ->
    action
}
val authReducer = useReducer(authReducerTask, null)

val AuthenticationProvider = FC<Props> {
    authReducer.let {(state, dispatch) ->
        authContext.Provider(value = state) {
            authDispatch.Provider(value = dispatch) {
                // children() ?
            }
        }
    }
}

[Hildebrandt Tobias]

I am slowly getting towards the pulling my hair out stage.
I reduced my example to a String:

val authContext = createContext<String?>(null)
val authDispatch = createContext<Dispatch<String>>()
val authReducerTask: Reducer<String?, String> = { state, action ->
    println("Reducer called with Action $action")
    action
}

The entrypoint App.kt is essentially just:

val App = FC<Props> {
    val authReducer = useReducer(authReducerTask, null)
    StrictMode {
        authReducer.let {(state, dispatch) ->
            authContext.Provider(value = state) {
                authDispatch.Provider(value = dispatch) {
                    CssBaseline()
                    RouterProvider {
                        router = appRouter
                    }
                }
            }
        }
    }
}

The Main.kt

val Main = FC<Props> {
    val token = useContext(authContext)
    println("Main context: ${authContext.hashCode()}")
    println("Main token: $token")
}

The Login.kt

val LoginView = FC<Props> {
    val token = useContext(authContext)
    println("LoginView context: ${authContext.hashCode()}")
    println("LoginView Token: $token")
    location.href = "${environment.SERVER_URL}/login/callback"
}

And the LoginCallback.kt

val LoginCallback = FC<Props> {
    val token = useContext(authContext)
    val dispatch = useContext(authDispatch)
    println("LoginCallback context: ${authContext.hashCode()}")
    println("LoginCallback Token: $token")
    println("LoginCallback Dispatch: $dispatch")
    dispatch?.let {
        println("Dispatching")
        it("NEW TOKEN")
    }
    location.href = environment.SERVER_URL // back to main.
}

So when I visit /login he does a roundtrip to /login/callback and then finally sits at / .
But when I look at the Output then the String is not written and always null.
Console:

LoginView context: -208293842
LoginView Token: null
LoginView context: -208293842
LoginView Token: null
LoginCallback context: -1122324025
LoginCallback Token: null
LoginCallback Dispatch: function () { [native code] }
Dispatching
Reducer called with Action NEW TOKEN
LoginCallback context: -1122324025
LoginCallback Token: NEW TOKEN
LoginCallback Dispatch: function () { [native code] }
Dispatching
LoginCallback context: -1122324025
LoginCallback Token: NEW TOKEN
LoginCallback Dispatch: function () { [native code] }
Dispatching
Reducer called with Action NEW TOKEN
Main context: 1918903185
Main token: null
Main context: 1918903185
Main token: null

[Hildebrandt Tobias]

I simplified it a little and also put it on SO: https://stackoverflow.com/questions/77578591/kotlinjs-react-context-and-reducer

[Artem Kobzar]

So, the problem is, that you are navigating throw the browser api, so, your web app will be reloaded and the state will be reset. To fix it, you shouldn't directly manipulate with the location href, but use some router, like react-router, that will not directly reload your page and will keep the updated state.
https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-react-router-dom

[Hildebrandt Tobias]

Hey, thank you very much for your input. I will check this out this evening.
I used href because on a SO answer there was a snippet on why to always use href.
Thanks!

[Hildebrandt Tobias]

Hey, thanks again for your input. It worked.
Just a comprehension question. If the context is lost/discarded/changes with a
manual reload or navigation by direkt URL change. How would I go about retrieving
the context again? I know redux exists, but I wanted to try to avoid it for now to practice more.
Is this where I use useLocalStorage to retrieve relevant data and rebuild the context again?