You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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);
The text was updated successfully, but these errors were encountered:
I was wondering how you'd implement an
init
function instead ofinitModel
. How would we make an HTTP request that populates the initial data?Like this in Elm:
How would the Javascript look like? I can't wrap my head around it.
The text was updated successfully, but these errors were encountered: