Merge pull request #116 from timwis/rename-action-param-to-data
Rename action param to data
This commit is contained in:
@@ -128,7 +128,7 @@ can be called to modify it:
|
|||||||
app.model({
|
app.model({
|
||||||
state: { title: 'Set the title' },
|
state: { title: 'Set the title' },
|
||||||
reducers: {
|
reducers: {
|
||||||
update: (action, state) => ({ title: action.value })
|
update: (data, state) => ({ title: data.value })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -173,7 +173,7 @@ const app = choo()
|
|||||||
app.model({
|
app.model({
|
||||||
state: { title: 'Set the title' },
|
state: { title: 'Set the title' },
|
||||||
reducers: {
|
reducers: {
|
||||||
update: (action, state) => ({ title: action.value })
|
update: (data, state) => ({ title: data.value })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -203,9 +203,9 @@ sources of data. `effects` react to changes, perform an `action` and can then
|
|||||||
post the results. `reducers` take data, modify it, and update the internal
|
post the results. `reducers` take data, modify it, and update the internal
|
||||||
`state`.
|
`state`.
|
||||||
|
|
||||||
Communication of data is done using objects called `actions`. Each `action` has
|
Communication of data is done using objects called `actions`. Each `action`
|
||||||
any number of properties for data, and a unique `type` that can trigger
|
consists of a unique `actionName` and an optional payload of `data`, which can
|
||||||
properties on the models.
|
be any value.
|
||||||
|
|
||||||
When a `reducer` modifies `state`, the `router` is called, which in turn calls
|
When a `reducer` modifies `state`, the `router` is called, which in turn calls
|
||||||
`views`. `views` take `state` and return [DOM][dom] nodes which are then
|
`views`. `views` take `state` and return [DOM][dom] nodes which are then
|
||||||
@@ -256,7 +256,7 @@ app.model({
|
|||||||
namespace: 'todos',
|
namespace: 'todos',
|
||||||
state: { todos: [] },
|
state: { todos: [] },
|
||||||
reducers: {
|
reducers: {
|
||||||
add: (action, state) => ({ todos: state.todos.concat(action.payload) })
|
add: (data, state) => ({ todos: state.todos.concat(data.payload) })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -302,7 +302,7 @@ app.model({
|
|||||||
(send) => setInterval(() => send('app:print', { payload: 'dog?' }), 1000)
|
(send) => setInterval(() => send('app:print', { payload: 'dog?' }), 1000)
|
||||||
],
|
],
|
||||||
effects: {
|
effects: {
|
||||||
print: (action, state) => console.log(action.payload)
|
print: (data, state) => console.log(data.payload)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -368,7 +368,7 @@ app.model({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function getJson (state, action, send) {
|
function getJson (state, data, send) {
|
||||||
http.get('/my-endpoint', { json: true }, function (err, res, body) {
|
http.get('/my-endpoint', { json: true }, function (err, res, body) {
|
||||||
if (err) return send('app:error', { payload: err.message })
|
if (err) return send('app:error', { payload: err.message })
|
||||||
if (res.statusCode !== 200 || !body) {
|
if (res.statusCode !== 200 || !body) {
|
||||||
@@ -378,7 +378,7 @@ function getJson (state, action, send) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function postJson (state, action, send) {
|
function postJson (state, data, send) {
|
||||||
const body = { foo: 'bar' }
|
const body = { foo: 'bar' }
|
||||||
http.post('/my-endpoint', { json: body }, function (err, res, body) {
|
http.post('/my-endpoint', { json: body }, function (err, res, body) {
|
||||||
if (err) return send('app:error', { payload: err.message })
|
if (err) return send('app:error', { payload: err.message })
|
||||||
@@ -389,7 +389,7 @@ function postJson (state, action, send) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function httpDelete (state, action, send) {
|
function httpDelete (state, data, send) {
|
||||||
const body = { foo: 'bar' }
|
const body = { foo: 'bar' }
|
||||||
http.del('/my-endpoint', { json: body }, function (err, res, body) {
|
http.del('/my-endpoint', { json: body }, function (err, res, body) {
|
||||||
if (err) return send('app:error', { payload: err.message })
|
if (err) return send('app:error', { payload: err.message })
|
||||||
@@ -499,15 +499,15 @@ function view (params, state, send) {
|
|||||||
`
|
`
|
||||||
|
|
||||||
function onSubmit (event) {
|
function onSubmit (event) {
|
||||||
send('login', { data: new FormData(event.target) })
|
send('login', new FormData(event.target))
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
app.model({
|
app.model({
|
||||||
effects: {
|
effects: {
|
||||||
login: (action, state, send) => {
|
login: (data, state, send) => {
|
||||||
http.post('/login', { body: action.data }, (err, res, body) => {
|
http.post('/login', { body: data }, (err, res, body) => {
|
||||||
send('authorize', { payload: body })
|
send('authorize', { payload: body })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -642,9 +642,9 @@ arguments:
|
|||||||
in-namespace only.
|
in-namespace only.
|
||||||
- __state:__ object. Key value store of initial values
|
- __state:__ object. Key value store of initial values
|
||||||
- __reducers:__ object. Syncronous functions that modify state. Each function
|
- __reducers:__ object. Syncronous functions that modify state. Each function
|
||||||
has a signature of `(action, state)`
|
has a signature of `(data, state)`
|
||||||
- __effects:__ object. Asyncronous functions that perform IO. Each function has
|
- __effects:__ object. Asyncronous functions that perform IO. Each function has
|
||||||
a signature of `(action, state, send)` where `send` is a reference to
|
a signature of `(data, state, send)` where `send` is a reference to
|
||||||
`app.send()`
|
`app.send()`
|
||||||
|
|
||||||
### app.router(params, state, send)
|
### app.router(params, state, send)
|
||||||
|
|||||||
@@ -10,12 +10,12 @@ const app = choo({
|
|||||||
const send = createSend('onError: ')
|
const send = createSend('onError: ')
|
||||||
send('app:error', err)
|
send('app:error', err)
|
||||||
},
|
},
|
||||||
onAction: function (action, state, name, caller, createSend) {
|
onAction: function (data, state, name, caller, createSend) {
|
||||||
console.groupCollapsed(`Action: ${caller} -> ${name}`)
|
console.groupCollapsed(`Action: ${caller} -> ${name}`)
|
||||||
console.log(action)
|
console.log(data)
|
||||||
console.groupEnd()
|
console.groupEnd()
|
||||||
},
|
},
|
||||||
onState: function (action, state, prev, createSend) {
|
onState: function (data, state, prev, createSend) {
|
||||||
console.groupCollapsed('State')
|
console.groupCollapsed('State')
|
||||||
console.log(prev)
|
console.log(prev)
|
||||||
console.log(state)
|
console.log(state)
|
||||||
|
|||||||
@@ -6,13 +6,13 @@ module.exports = {
|
|||||||
title: 'Button pushing machine 3000'
|
title: 'Button pushing machine 3000'
|
||||||
},
|
},
|
||||||
reducers: {
|
reducers: {
|
||||||
set: (action, state) => ({ 'title': action.data })
|
set: (data, state) => ({ 'title': data })
|
||||||
},
|
},
|
||||||
effects: {
|
effects: {
|
||||||
good: function (action, state, send, done) {
|
good: function (data, state, send, done) {
|
||||||
request('/good', send, done)
|
request('/good', send, done)
|
||||||
},
|
},
|
||||||
bad: (action, state, send, done) => request('/bad', send, done)
|
bad: (data, state, send, done) => request('/bad', send, done)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -26,6 +26,6 @@ function request (uri, send, done) {
|
|||||||
return done(new Error(message))
|
return done(new Error(message))
|
||||||
}
|
}
|
||||||
if (!body) return done(new Error('fatal: no body received'))
|
if (!body) return done(new Error('fatal: no body received'))
|
||||||
send('api:set', { data: body.message || body.title }, done)
|
send('api:set', body.message || body.title, done)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,13 +15,13 @@ module.exports = {
|
|||||||
triggerTime: null
|
triggerTime: null
|
||||||
},
|
},
|
||||||
reducers: {
|
reducers: {
|
||||||
setError: function (action, state) {
|
setError: function (data, state) {
|
||||||
return {
|
return {
|
||||||
errors: state.errors.concat(action.message),
|
errors: state.errors.concat(data.message),
|
||||||
errorTimeDone: action.errorTimeDone
|
errorTimeDone: data.errorTimeDone
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'delError': function (action, state) {
|
'delError': function (data, state) {
|
||||||
state.errors.shift()
|
state.errors.shift()
|
||||||
return { errors: state.errors }
|
return { errors: state.errors }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,13 +35,13 @@ function createModel () {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
reducers: {
|
reducers: {
|
||||||
'print': (action, state) => {
|
'print': (data, state) => {
|
||||||
return ({ msg: state.msg + ' ' + action.payload })
|
return ({ msg: state.msg + ' ' + data.payload })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
effects: {
|
effects: {
|
||||||
close: () => stream.close(),
|
close: () => stream.close(),
|
||||||
error: (action, state) => console.error(`error: ${action.payload}`)
|
error: (data, state) => console.error(`error: ${data.payload}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,10 +8,10 @@ app.model({
|
|||||||
title: 'my demo app'
|
title: 'my demo app'
|
||||||
},
|
},
|
||||||
reducers: {
|
reducers: {
|
||||||
update: (action, state) => ({ title: action.payload })
|
update: (data, state) => ({ title: data.payload })
|
||||||
},
|
},
|
||||||
effects: {
|
effects: {
|
||||||
update: (action, state, send) => (document.title = action.payload)
|
update: (data, state, send) => (document.title = data.payload)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -79,8 +79,8 @@ function choo (opts) {
|
|||||||
|
|
||||||
// update the DOM after every state mutation
|
// update the DOM after every state mutation
|
||||||
// (obj, obj, obj, str, fn) -> null
|
// (obj, obj, obj, str, fn) -> null
|
||||||
function render (action, state, prev, name, createSend) {
|
function render (data, state, prev, name, createSend) {
|
||||||
if (opts.onState) opts.onState(action, state, prev, name, createSend)
|
if (opts.onState) opts.onState(data, state, prev, name, createSend)
|
||||||
if (state === prev) return
|
if (state === prev) return
|
||||||
|
|
||||||
const newTree = _router(state.location.pathname, state, prev)
|
const newTree = _router(state.location.pathname, state, prev)
|
||||||
@@ -133,8 +133,8 @@ function appInit (opts) {
|
|||||||
const loc = document.location
|
const loc = document.location
|
||||||
const state = { pathname: (opts.hash) ? hashMatch(loc.hash) : loc.href }
|
const state = { pathname: (opts.hash) ? hashMatch(loc.hash) : loc.href }
|
||||||
const reducers = {
|
const reducers = {
|
||||||
setLocation: function setLocation (action, state) {
|
setLocation: function setLocation (data, state) {
|
||||||
return { pathname: action.location.replace(/#.*/, '') }
|
return { pathname: data.location.replace(/#.*/, '') }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// if hash routing explicitly enabled, subscribe to it
|
// if hash routing explicitly enabled, subscribe to it
|
||||||
|
|||||||
Reference in New Issue
Block a user