choo: fix updates
This commit is contained in:
@@ -27,7 +27,7 @@ app.model('title', {
|
|||||||
'update': (action, state) => ({ title: action.payload })
|
'update': (action, state) => ({ title: action.payload })
|
||||||
},
|
},
|
||||||
effects: {
|
effects: {
|
||||||
'update': (action, state, send) => (document.title = action.title)
|
'update': (action, state, send) => (document.title = action.payload)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -46,8 +46,8 @@ app.router((route) => [
|
|||||||
route('/', mainView)
|
route('/', mainView)
|
||||||
])
|
])
|
||||||
|
|
||||||
const node = app.start()
|
const tree = app.start()
|
||||||
document.body.appendChild(node)
|
document.body.appendChild(tree)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Concepts
|
## Concepts
|
||||||
|
|||||||
+3
-3
@@ -7,7 +7,7 @@ app.model('title', {
|
|||||||
'update': (action, state) => ({ title: action.payload })
|
'update': (action, state) => ({ title: action.payload })
|
||||||
},
|
},
|
||||||
effects: {
|
effects: {
|
||||||
'update': (action, state, send) => (document.title = action.title)
|
'update': (action, state, send) => (document.title = action.payload)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -26,5 +26,5 @@ app.router((route) => [
|
|||||||
route('/', mainView)
|
route('/', mainView)
|
||||||
])
|
])
|
||||||
|
|
||||||
const node = app.start()
|
const tree = app.start()
|
||||||
document.body.appendChild(node)
|
document.body.appendChild(tree)
|
||||||
|
|||||||
@@ -23,8 +23,8 @@ function choo () {
|
|||||||
return start
|
return start
|
||||||
|
|
||||||
// start the application
|
// start the application
|
||||||
// str|DOMNode -> DOMNode
|
// null -> DOMNode
|
||||||
function start (query) {
|
function start () {
|
||||||
const events = bootstrap(_models)
|
const events = bootstrap(_models)
|
||||||
const send = sendAction({
|
const send = sendAction({
|
||||||
onaction: events.middleware,
|
onaction: events.middleware,
|
||||||
@@ -32,14 +32,16 @@ function choo () {
|
|||||||
state: events.state
|
state: events.state
|
||||||
})
|
})
|
||||||
|
|
||||||
const node = _router(send.state().location, send.state(), send)
|
const tree = _router(send.state().location, send.state(), send)
|
||||||
console.log(node)
|
tree.setAttribute('id', 'choo-root')
|
||||||
document.body.appendChild(node)
|
return tree
|
||||||
|
|
||||||
// update on every change
|
// update on every change
|
||||||
function onchange (action, state) {
|
function onchange (action, state) {
|
||||||
const el = document.querySelector('#main')
|
const oldTree = document.querySelector('#choo-root')
|
||||||
yo.update(el, router(state.location, send, state))
|
const newTree = _router(state.location, state, send)
|
||||||
|
newTree.setAttribute('id', 'choo-root')
|
||||||
|
yo.update(oldTree, newTree)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -109,13 +111,25 @@ function bootstrap (events) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function modifyState (action, state, send) {
|
function modifyState (action, state, send) {
|
||||||
|
var _reducers = false
|
||||||
|
var _effects = false
|
||||||
|
var newState = null
|
||||||
|
|
||||||
if (reducers[action.type]) {
|
if (reducers[action.type]) {
|
||||||
return reducers[action.type](action, state, send)
|
newState = xtend(state, reducers[action.type](action, state))
|
||||||
} else if (effects[action.type]) {
|
_reducers = true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (effects[action.type]) {
|
||||||
effects[action.type](action, state, send)
|
effects[action.type](action, state, send)
|
||||||
return state
|
newState = newState || state
|
||||||
} else {
|
_effects = true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!_reducers && !_effects) {
|
||||||
throw new Error('Could not find action ' + action.type)
|
throw new Error('Could not find action ' + action.type)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return newState
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user