\n\n\n## features\n\n- **minimal size**: `inu` + [`yo-yo`](https://github.com/maxogden/yo-yo) + [`pull-stream`](https://github.com/pull-stream/pull-stream) weighs only ~8kb\n- **app is a data structure**: only need to learn 4 functions, automatically supports plugins\n- [**architecture is fractal**](https://github.com/jarvisaoieong/redux-architecture#redux-architecture): compose one app from many smaller apps\n- [**single source of truth**](http://redux.js.org/docs/introduction/ThreePrinciples.html#single-source-of-truth): the state of your app is a single object tree\n- [**state is read-only**](http://redux.js.org/docs/introduction/ThreePrinciples.html#state-is-read-only): update state by dispatching an action, an object describing what happened\n- [**update with pure functions**](http://redux.js.org/docs/introduction/ThreePrinciples.html#changes-are-made-with-pure-functions): updates are handled by a pure function, no magic\n- **first-class side effects**: initial state or updates can include an effect, an object describing what will happen\n- **omakase**: consistent flavoring with [pull streams](https://pull-stream.github.io) all the way down\n\n## demos\n\n- [./examples/clock](./examples/clock.js): simple app to count seconds\n- [./examples/title](./examples/title.js): simple app to change document.title\n- [./examples/routing](./examples/routing.js): url routing with [`sheet-router`](https://github.com/yoshuawuyts/sheet-router)\n- [./examples/compose](./examples/compose.js): multiplex many apps into one app\n- [./examples/counter](./examples/counter.js): simple counter expressed in standard redux pattern\n- [./examples](./examples/index.js): above examples composed into one app deployed at .\n- [pietgeursen/ssb-gathering-ui](https://github.com/pietgeursen/ssb-gathering-ui): Facebook-style events using [`inu`](./), [`muxrpc`](https://github.com/ssbc/muxrpc), [`sheetify`](https://github.com/stackcss/sheetify), [`tcomb`](https://github.com/gcanti/tcomb) and other fun stuff.\n- [pietgeursen/inu-fft](https://github.com/pietgeursen/inu-fft): Little inu app with fft of microphone input\n- [ahdinosaur/inu-plays-roguelike](https://github.com/ahdinosaur/inu-plays-roguelike): ['Twitch Plays Pokémon'](https://en.wikipedia.org/wiki/Twitch_Plays_Pok%C3%A9mon)-style ['Roguelike'](https://en.wikipedia.org/wiki/Roguelike) game using [`inu`](https://github.com/ahdinosaur/inu), [`tcomb`](https://github.com/gcanti/tcomb), and things.\n- [holodex/app#compost](https://github.com/holodex/app/tree/compost): full-stack user directory app using [`inu`](./), [`inux`](https://github.com/ahdinosaur/inux), and [`vas`](https://github.com/ahdinosaur/vas).\n\n*if you want to share anything using `inu`, add your thing here!*\n\n## example\n\n```js\nconst { start, html, pull } = require('inu')\nconst delay = require('pull-delay')\n\nconst app = {\n\n init: () => ({\n model: 0,\n effect: 'SCHEDULE_TICK' // start perpetual motion\n }),\n\n update: (model, action) => {\n switch (action) {\n case 'TICK':\n return {\n model: (model + 1) % 60,\n effect: 'SCHEDULE_TICK'\n }\n default:\n return { model }\n }\n },\n\n view: (model, dispatch) => html`\n
\n Seconds Elapsed: ${model}\n
\n `,\n\n run: (effect, sources) => {\n switch (effect) {\n case 'SCHEDULE_TICK':\n return pull(\n pull.values(['TICK']),\n delay(1000)\n )\n }\n }\n}\n\nconst main = document.querySelector('.main')\nconst { views } = start(app)\n\npull(\n views(),\n pull.drain(function (view) {\n html.update(main, view)\n })\n)\n```\n\nfor a full example of composing multiple apps together, see [source](./examples/index.js) and [demo](https://ahdinosaur.github.io/inu).\n\n## concepts\n\nimagine your app’s current state is described as a plain object. for example, the initial state of a todo app might look like this:\n\n```js\nvar initState = {\n model: {\n todos: [{\n text: 'Eat food',\n completed: true\n }, { \n text: 'Exercise',\n completed: false\n }],\n visibilityFilter: 'SHOW_COMPLETED'\n },\n effect: 'FETCH_TODOS'\n}\n```\n\nthis state object describes the _model_ (a list of todo items and an option for how to filter these items) and any optional _effect_ (we immediately want to fetch for any new todo items).\n\nto change something in the state, we need to dispatch an action. an action is a plain JavaScript object (notice how we don’t introduce any magic?) that describes what happened. here are a few example actions:\n\n```js\n{ type: 'ADD_TODO', text: 'Go to swimming pool' }\n{ type: 'TOGGLE_TODO', index: 1 }\n{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }\n{ type: 'LOAD_TODOS' }\n```\n\nenforcing that every change is described as an action lets us have a clear understanding of what’s going on in the app. if something changed, we know why it changed. actions are like breadcrumbs of what has happened.\n\nfinally, to tie state and actions together, we write an _update_ function. again, nothing magic about it — it’s just a function that takes the model and action as arguments, and returns the next state of the app.\n\nit would be hard to write such a function for a big app, so we write smaller functions managing parts of the state:\n\n```js\nfunction visibilityFilter (model, action) {\n if (action.type === 'SET_VISIBILITY_FILTER') {\n return action.filter\n } else {\n return { model }\n }\n}\n\nfunction todos (model, action) {\n switch (action.type) {\n case 'ADD_TODO':\n return { model: model.concat([{ text: action.text, completed: false }]) }\n case 'TOGGLE_TODO':\n return {\n model: model.map((todo, index) =>\n action.index === index ?\n { text: todo.text, completed: !todo.completed } :\n todo\n )\n }\n case 'LOAD_TODOS':\n return { model, effect: 'FETCH_TODOS' }\n default:\n return { model }\n }\n}\n```\n\nand we write another update function that manages the complete state of our app by calling those two update functions for the corresponding state keys:\n\n```js\nfunction appUpdate (model, action) {\n const todosState = todos(model.todos, action)\n const visibilityFilterState = visibilityFilter(model.visibilityFilter, action)\n\n return {\n model: {\n todos: todosState.model,\n visibilityFilter: visibilityFilter.model\n },\n effect: todosState.effect\n }\n}\n```\n\nif any effect is returned by an update function, we want to run it. this run functions is able to listen to any future changes and return a stream of any new actions.\n\nhere's how we handle our effect to fetch any todos, using [`pull-stream`](https://github.com/pull-stream/pull-stream) as `pull`:\n\n```js\nfunction appRun (effect, sources) {\n if (effect === 'FETCH_TODOS') {\n return pull(\n fetchTodos(),\n pull.map(todo => {\n return {\n type: 'ADD_TODO',\n text: todo.text\n }\n })\n )\n }\n}\n```\n\nnow that we have our state, changes, and side effects managed in a predictable (and easy-to-test) way, we want to view our epic todo list.\n\nhere's a simplified view using [`yo-yo`](https://github.com/maxogden/yo-yo) as `html`:\n\n```js\nfunction appView (model, dispatch) {\n return html`\n
![\"stability\"](\"https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\"){kind=icon}
\n \n \n \n ![\"npm](\"https://img.shields.io/npm/v/inu.svg?style=flat-square\")
\n \n \n \n ![\"build](\"https://img.shields.io/travis/ahdinosaur/inu/master.svg?style=flat-square\")
\n \n \n \n ![\"test](\"https://img.shields.io/codecov/c/github/ahdinosaur/inu/master.svg?style=flat-square\")
\n \n \n \n ![\"Downloads\"](\"https://img.shields.io/npm/dm/inu.svg?style=flat-square\"\n)
\n \n \n \n ![\"standard](\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\"){kind=icon}
\n \n