question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Removing the 'dispatch' function from the view function

See original GitHub issue

Having now spent some time playing with Fabulous (and really enjoying using it!) I became curious as to why the update function requires the dispatch function to be passed in which is a little different to Elm. Apologies if there is a well know design reason for it and please let me know if there is!

Fabulous

model : 'model
update : 'msg -> 'model -> 'model
view : 'model -> ('msg -> unit) ->  ViewElement

Elm

model : Model
update : Msg -> Model -> Model
view : Model ->  Html Msg

When starting with Fabulous it seemed a little odd to have this parameter and it seems Jamie was confused. From looking through the code I think its there to ensure type safety for the commands on the ViewElements? This lead me to think could ViewElement be defined as ViewElement<'msg> in something like the following pseudo code:

type ViewElement<'msg> = 
    { text : string
      command : 'msg option 
      children : ViewElement<'msg> list option }
    member x.Create() : obj = new obj()
    member x.UpdateIncremental(prev: ViewElement<'msg>, target: obj) : unit = ()

type View() =
    static member inline Button<'msg> (text: string, command : 'msg) = { text = text; command = Some command; children = None }
    static member inline Label (text: string) = { text = text; command = None; children = None }
    static member inline ContentPage (children : ViewElement<'msg> list) = { text = ""; command = None; children = Some children }

    type Model = { Count : int }
    type Msg = Increment
    let init () = { Count = 0 }

    let update (msg : Msg) (model : Model) : Model =
        match msg with 
        | Increment -> { model with Count = model.Count + 1 }

    let view (model : Model) =
        View.ContentPage(
            children =
                [ View.Label(text = string model.Count)
                  View.Button(text = "Increment", command = Increment)])

    let program = mkSimple init update view

This constrains the command to all be of type Msg and would give the classic elm architecture of:

model : 'model
update : 'msg -> 'model -> 'model
view : 'model ->  ViewElement<'msg>

Not sure if this is possible or desirable but I thought I would ask the question?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
et1975commented, Jul 16, 2019

Just adding 2c: if I had control over view DSL (as Fabulous does), I’d have avoided passing dispatch explicitly. This has nothing to do with Elmish (which still needs to pass the dispatch into whatever renderes the view) and everything to do with the DSL that was available to implement Elmish.React. If you look at the issue it is still on my mind.

0reactions
TimLarivierecommented, May 16, 2022

v2 removes dispatch from the view function 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

React dispatch is not defined remove action
i have a problem with my actionsFormatter. ... How could I fix this problem? import { removeEnvironnement } from '../../actions/environnement'; ...
Read more >
What Even Is A Dispatch Function?
I think looking at how the dispatch function is built really helps remove the mystery behind reducers. So let's build a simple implementation...
Read more >
Dispatcher function never gets called in Redux Thunk
I'm working on a project in React, but there's an issue I can't resolve with using Redux. My thunk is set up as...
Read more >
Adding and Removing items from Redux store
Here we are dispatching our action by using the name of our key in the object being returned by our mapDispatchToProps . I...
Read more >
How To Manage State in React with Redux
The method you will use is called dispatch and it sends a particular action to the Redux store.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found