docs: super clean concepts

This commit is contained in:
Yoshua Wuyts
2016-05-16 02:25:52 +07:00
parent 1738ed019b
commit ea8571e940
+24 -12
View File
@@ -56,25 +56,36 @@ document.body.appendChild(tree)
``` ```
## Concepts ## Concepts
- __state:__ a single object that contains __all__ application state - __user:__ 🙆
- __reducers:__ synchronous functions that modify `state` - __DOM:__ the [Document Object Model][dom] is what is currently displayed in
your browser
- __actions:__ a named event with optional properties attached. Used to call
`effects` and `reducers` that have been registered in `models`
- __model:__ optionally namespaced object containing `subscriptions`, `effects`
and `reducers`
- __subscriptions:__ read-only data sources that emit `actions`
- __effects:__ asynchronous functions that emit an `action` when done - __effects:__ asynchronous functions that emit an `action` when done
- __subscriptions:__ read-only data sources that emit `action`s for new data - __reducers:__ synchronous functions that modify `state`
- __state:__ a single object that contains __all__ the values used in your
application
- __router:__ determines which `view` to render
- __views:__ take `state` and returns a new `DOM tree` that is rendered in the
browser
```txt ```txt
┌───────────────────────────┐ ┌────────┐ ┌─────────────────────────────┐ ┌────────┐
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ User │ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ User │
│ ┌─────────────────┐ │ └────────┘ │ ┌─────────────────┐ │ └────────┘
├──┼─│ Subscriptions │ │ │ │ ├──┼─│ Subscriptions │ │ │ │
│ └─────────────────┘ │ ▼ │ └─────────────────┘ │ ▼
│ │ ┌─────────────────┐ │ ┌────────┐ ┌────────┐ │ │ ┌─────────────────┐ │ ┌────────┐
└────│ Effects │◀─────────│ DOM │◀───────────│ Views │ └────│ Effects │◀─────┼─────│ DOM │◀──────────────┐
│ └─────────────────┘ │ Actions └────────┘ DOM tree └────────┘ │ └─────────────────┘ │ Actions └────────┘ DOM tree
┌─────────────────┐ │ ┌─────────────────┐
│ │ Reducers │◀┼──┘ │ │ Reducers │◀┼────┘ │
└─────────────────┘ │ └─────────────────┘ │
│ │ │ ┌────────┐ │ │ │ ┌────────┐ ┌────────┐
└───────────────────▶│ Router │─────────────────┘ └───────────────────▶│ Router │─────────▶│ Views │
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ State └────────┘ State └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ State └────────┘ State └────────┘
Model Model
``` ```
@@ -209,3 +220,4 @@ $ npm install choo
[9]: https://npmjs.org/package/choo [9]: https://npmjs.org/package/choo
[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square [10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[11]: https://github.com/feross/standard [11]: https://github.com/feross/standard
[dom]: https://en.wikipedia.org/wiki/Document_Object_Model