Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

init function instead of initModel in the app function? #6

Open
8483 opened this issue Dec 19, 2018 · 0 comments
Open

init function instead of initModel in the app function? #6

8483 opened this issue Dec 19, 2018 · 0 comments

Comments

@8483
Copy link

8483 commented Dec 19, 2018

I was wondering how you'd implement an init function instead of initModel. How would we make an HTTP request that populates the initial data?

Like this in Elm:

init : (Model, Cmd Msg)
init = (initModel, getData)

main : Program Never
main = App.program
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}

How would the Javascript look like? I can't wrap my head around it.

function app(initModel, update, view, node) {
            // The initial model is set as the current model.
            let model = initModel;
            // The new view is rendered based on the initial model.
            let currentView = view(dispatch, model);
            // The new view is created and appended to the DOM.
            let rootNode = createElement(currentView);
            node.appendChild(rootNode);

            // Dispatch sends a message with a type and payload.
            function dispatch(msg) {
                // Update "catches" it, updates the current model, and returns it.
                // returns either a model or an array with model and command
                const updates = update(msg, model);
                // Array check boolean
                const isArray = updates.constructor === Array;
                // Get the model from the array. If not array, it's just the model.
                model = isArray ? updates[0] : updates;
                // Get the command form the array
                const command = isArray ? updates[1] : null;
                // Pass the dispatch function and command object for HTTP execution
                httpEffects(dispatch, command);
                // Return the new view either from normal types, or HTTP ones
                // The new view is rendered based on the returned new model.
                const updatedView = view(dispatch, model);
                // The DOM updates are defined.
                const patches = diff(currentView, updatedView);
                // The DOM updates are applied.
                rootNode = patch(rootNode, patches);
                // The new view becomes the old view in for future dispatches.
                currentView = updatedView;
            }

            function httpEffects(dispatch, command) {
                if (command === null) {
                    return;
                }
                // Get the request object from the command.
                let request = command.request;
                // Fetch, and dispatch a success or fail message.
                fetch(request.url, request.headers, request.body)
                    .then(res => res.json())
                    .then(result => {
                        // Dispatch the returned message defined in the command.
                        dispatch(command.successMsg(result));
                    })
                    .catch(error => {
                        // Dispatch the returned message defined in the command.
                        dispatch(command.errorMsg(error));
                    });
            }
        }

        // App initializing.
        const rootNode = document.getElementById('app');
        app(initModel, update, view, rootNode);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant