fable-compiler / Fable.React.UseElmish

useElmish React hook
MIT License
1 stars 1 forks source link

Dispatch in child using parent dispatch isn't working. #1

Closed halcwb closed 1 year ago

halcwb commented 1 year ago

I wonder why this isn't working:

Child like:

        let update dispatch (msg : Msg) _ : State * Cmd<Msg> =
            printfn "handle change is called"
            match msg with 
            | Clear    -> None, Cmd.none
            | Select s -> Some s, Cmd.none
            |> fun (s, c) -> 
                s |> dispatch
                s, c

In the view of child:

    let Select (props : {| label : string; selected : string option; values : (int *string) []; dispatch : string option -> unit |}) =
        let state, dispatch = React.useElmish(Select.init props.selected, Select.update props.dispatch)

And in the parent:

        let createSelect label changeValue vs =
            Components.Select({| 
                label = label
                selected = None
                values = vs
                dispatch = ParentMsg >> parentDispatch
            |})

So the parent passes a dispatch function to the child composed of the parent msg constructor and the parent dispatch function. In the child this is called by every update, but then the parent update is never called.

By the way, if you use a local state in the child and call the dispatch of the parent in the local state setter, then it works! But then you cannot control the state of the child anymore, for example resetting the child to the initial state by the parent.

halcwb commented 1 year ago

I have created a short test scenario in this repro branch: https://github.com/halcwb/JSX-example/tree/zaid.

It shows a parent child with a root and a count child and a text child. The count child uses React.useState and propagates changes to the dispatch supplied by the root. This works.

The text child uses React.useElmish and propagates changes also to the dispatch of root but this time in the update function. However, this doesn't work. Using Cmd.ofEffect doesn't work either (but used to work with Elmish v3).

halcwb commented 1 year ago

It seems that the issue is solved: https://github.com/halcwb/JSX-example/issues.