31:Tdd7,md` # Redux in a single function with RxJS ##### The story of an observable state store ## Why If you're still ramping into [RxJS](http://reactivex.io/rxjs/) (which took me a while, and is ongoing), or you're stoked on it because it's essentially fulfilling the dreams that you thought promises would solve (callback hell data flow nightmares), then this article is for you. The goal of this article is to **wrangle state with RxJS** and apply comforts and learnings we've attained from other implentations of state management. **In this article, that's pretty specifically [Redux](https://redux.js.org).** ### What about Redux inspired this solution? #### [Reducers](https://www.javascriptfatigue.club/blog/2016/12/28/redux-fundamentals-what-is-a-reducer) I like the cleanliness, I like the focus, but most of all because they represent the meat and potatoes of the business logic. **No mixing of the data flow with the work.** It's nice to know that these functions always manipulate what you pass in. They are the **artisans of your data.** #### [Actions](https://redux.js.org/basics/actions) These are clean and organized too. **They bundle intent with what to change it by.** Like a customer in a store requesting a repair on a tool and they brought all the materials required. But.. I HATE the ALL_CAPS. Makes for angry looking/sounding code. Those switch statements read like a very angry, or busy, customer service representative. ADD_THING!? Then here's your thing! I find the action and the payload are too tightly coupled too, feels limiting. A customer may want to make the request but have someone else bring the materials. Actions are the **change requests for your data.** ### What about RxJS inspired this solution? #### [Stream$](http://rxmarbles.com/) I really like the idea of treating everything as a stream, essentially assuming things are more likely to happen many times over time, than they are only once. **Callbacks are handy in the moment, but compound poorly over time.** Streams are the opposite. Generally more work upfront, but long term scale much better. They also **unify all your event systems into 1 strategy.** If you're a fan of map/filter/reduce, then RxJS is a playground. If you're not a fan, I think you will eventually be. Once you can map/filter/reduce any part of the dataflow in your app (clicks, fetches, animations, etc), you start to realize you need to **know less, to do a lot more**. I always like finding that feeling. ## What are we making? This article seeks to **find a harmonious melding** of [Redux](https://redux.js.org/) and [RxJS](https://github.com/ReactiveX/rxjs), in hopes of a **meaningful reactive functional programming style state store** that can be used across an application. ### What I want from this state store Provide a **seed value** and a **set of reducers**, then **get back a stream of state** to **subscribe** any UI to, plus **action functions** to call for changing that state. The goal is to put all the state manipulation methods (business logic) and the class responsible for holding/sharing the state (store), all in one place. 1 store, *n* subscribers and action callers, all flowing unidirectionally through RxJS streams. This is a goal of reactive functional programming, to **centralize the data maintainer** and **provide subscriptions to the data** so subscribers stay current and only get what they're interested in. **Single source of truth and manipulation**. Let's try to enable that. 👍 ## How First off, we'll **import RxJS**: `32:T4d2,md` We're interested in using 2 types of observables for our store: [Subjects & BehaviorSubjects](https://github.com/ReactiveX/rxjs/tree/master/spec/subjects). ### Subject - A stream of only 1 value at a time - **No value** is delivered on subscription - Values can be pushed in from the outside - It’s an observer - It [multicasts](https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339) - When it’s done, it’s done - It passes values through itself ### BehaviorSubject - All of the above - **A value is delivered** on subscription (it remembers the last value) The distinction is subtle and important. One is better suited for UI subscription (BehaviorSubject) and the other for flow control (Subject). ## We're ready to look at some code! First thing we'll make is a function that can take our **state and actions + reducers**, and **return a store singleton** for components or controllers to **subscribe to** and **request changes from**. We're going to get rid of the all caps action constants, in favor of keys. While also, the value of that key is a function that wants to be called with the manipulation parameters. Slight shift in Redux syntax, but similar flow and goal. # Steal this function! `33:T407,md` Now that in 1 view you can see the function, the store creation syntax, as well as some demo UI that would be interested in the store itself, **go back and forth between there**. It's almost too simple. You are not decieved though, we have a **reactive interface with 1 function**. It's like your own mini firebase creator function. Init it, then it's hot and always fresh. 🔥 If the ES6 [currying](https://blog.benestudio.co/currying-in-javascript-es6-540d2ad09400) in those actions we passed in for the state store through you off, check out the next section of the article. We break it down, especially since the currying is very important to **how the RxJS function internals are managing responsibilities**. Otherwise, skip to the next more complex demo. ## Action Breakdown ###### Insert sport channel intro tune If those actions/reducer curried functions made you scratch your chin, then read this next code block that essentially expands that ES6 curly and semicolon lacking crap 😭, into "normal" Javascript. `34:T600,md` So, **what's going on?** #### First Function Is the incoming change function that gets called from your controllers or components. It's a vessel function that delivers how much to change the state by, and defauls the value to 1 if unspecified on calling. The UI has an opportunity in this reducer to pass a higher or lower value as the amount they want to increment/decrement. That parameter variable **goes into scope**. > **tldr;** accepts a change request, returns a function with some expectations.. #### Second Function Is the incoming current state. It's invoked by our RxJS state store whenever an action is called. **It provides current state, and expects new state.** The ingredients for our state manipulation are in scope. The inner block of this function (count + amount) has **access to the parameters scoped through our distributed closures**. We're free to put our business logic into this block, with the knowledge we've been safely delivered the dependencies for the task. > **tldr;** accepts current state, returns new state. **Functions returning functions**, not just meta to say, but appropriate so that each function can do a single thing well, separate the concerns, and be handled by responsible parties. # MOAR DEMO ## Classic Todo List Counters aren't challenging, but managing a todo list can be. What would a state store using this strategy look like? Well, it's really not that different. **We scaled up the complexity**, but **the code didn't really scale up**. That's a victory in my book. `35:T708,viewof Todos = { let view = html`

RxJS Todos:

` const render = list => { view.querySelector('dl').innerHTML = ` ${list.reduce((items, {id, text}) => ` ${items}

${text}

`, '')} ` } const create = () => TodosStore.actions.create({ text: view.querySelector('[add-item-value]').value, id: Math.floor(Math.random(0,10) * 100).toString() }) const update = item_id => TodosStore.actions.delete({ id: item_id }) const remove = ({target: edited_node}) => TodosStore.actions.update({ id: edited_node.parentNode.dataset.itemId, text: edited_node.textContent }) Rx.Observable.fromEvent(view, 'keyup') .filter(e => e.keyCode == 13) .filter(e => e.target.hasAttribute('add-item-value')) .subscribe(hit_enter => create()) Rx.Observable.fromEvent(view, 'click') .filter(e => e.target.hasAttribute('add-item')) .subscribe(create) Rx.Observable.fromEvent(view, 'click') .filter(e => e.target.hasAttribute('remove-item')) .do(e => e.target.nextElementSibling.style.textDecoration = 'line-through') .map(e => e.target.parentNode.dataset.itemId) .delay(1000) .subscribe(update) Rx.Observable.fromEvent(view, 'keyup') .debounce(() => Rx.Observable.interval(1000)) .filter(e => e.target.hasAttribute('update-item')) .distinct(e => e.target.textContent) .subscribe(remove) TodosStore.store$.subscribe(list => { render(list) view.querySelector('[add-item-value]').value = '' }) return view }36:[] 2f:{"title":"Redux in a single function with RxJS","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"Rx = require('https://unpkg.com/rxjs@5.5.11/bundles/Rx.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"function RxReduxStore(initial_state, reducers) { \t\t\t\t // pass in state and action functions\n let streams = {}, actions = {}, store$\n \n for (let action in reducers) { \t\t\t\t\t\t\t\t // pass in reducers keyed by action name\n let subject$ \t\t\t = new Rx.Subject() \t\t\t\t\t // subject for action/reducer data flow\n streams[`${action}$`] \t= subject$.map(reducers[action]) \t// stash a reducer mapped to a stream\n actions[action] \t= (args) => subject$.next(args) \t// forward action params to reducer stream\n }\n\n store$ = new Rx.BehaviorSubject(initial_state) \t\t\t\t // main store stream seeded with state\n .merge(...Object.values(streams)) \t\t\t\t\t\t\t // merge all reducers into single stream\n .scan((state, reducer) => reducer(state)) \t\t\t\t\t // pass state to each reducer\n \n return {store$, actions} \t\t\t\t\t\t\t\t\t\t // return store observable and action streams\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`\nOr you could npm install it \\`npm i rxstatestore\\`\n\nThat function is a little heavy, even with the comments. So below is example usage, I think it really helps convey the concept. **Let's make a store to hold count state.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"CountStore = RxReduxStore(0, {\n increment: (amount = 1) => count => count + amount,\n decrement: (amount = 1) => count => count - amount,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`\nand a sweet counter UI that's subscribed to the store, with UI to invoke the actions. I think having something to interact with, will help convey reasoning for the CountStore actions. \n\n**click it**, it works 😎\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof Counter = {\n let view = html`\n\t

Sweet Counter:

\n\t\n\tloading...\n\t\n `\n let count = view.querySelector('span')\n \n Rx.Observable.fromEvent(view, 'click')\n .forEach(({target}) =>\n target.hasAttribute('add')\n ? CountStore.actions.increment()\n : CountStore.actions.decrement()\n )\n \n CountStore.store$.subscribe(latest_count_value =>\n count.textContent = latest_count_value)\n \n return view\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"ActionBreakdown = {\n // shorthand ES6\n var increment = (amount = 1) => count => count + amount\n \n // could also be written as\n var increment = function(amount = 1) {\n return function(count) {\n return count + amount\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"TodosStore = RxReduxStore([], {\n create: new_todo => todos => \n [...todos, new_todo],\n update: updated_todo => todos => todos.map(datum => \n datum.id === updated_todo.id \n ? Object.assign(datum, updated_todo) \n\t : datum),\n delete: poor_todo => todos => todos.filter(datum => \n datum.id !== poor_todo.id),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`\nStart our **new todos from an empty array**, then **teach it C.R.U.D**. Boom, some UI can turn that interface into something meaningful.\n\nGo ahead, **type in some task**s. **Mark one** complete. **Update one**. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`\n

\n# Wrapping Up\nI like shorthand, I like observables, I like tracking state bugs in the store and UI bugs in the UI. **Redux isn't wrong**, but if it doesn't feel right and you're still searching for robust and flexible state management strategies, **grab that function up above**. Stick it into a project, and try making a couple stores with it. You understand that function, it would take longer than 1 article to fully understand the internals of Redux. \n\nNow that I've built a few things with RxJS and that state function, I'm feeling really good about wrangling all the activity in my application. **Next is to get better at testing these stores and streams..**\n\n## Going away present\nHere's a function that pairs nicely with the store creator function above: \n**a state logger to help you trace steps**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"function Logger(prefix, observable) {\n return observable.scan((prevState, nextState) => {\n console.groupCollapsed(`${prefix}:`)\n\n console.log(`%c prev state:`, `color: #999999; font-weight: bold`, prevState)\n console.log(`%c next state:`, `color: #4CAF50; font-weight: bold`, nextState)\n\n console.groupEnd()\n return nextState\n }).subscribe()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"Logger('Todos', TodosStore.store$)","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"md`\n**Check the console logs** for a report of your interactions with the Todos UI 👍\n\nAlso, twirl open the code next to each of the UI demos to see how I subscribed to the stores and updated the UI. If you have a favorite framework, spin it up and give RxJS and this function a shot. Or..\n\n## Fork this and make your own component demos!\n
\nLet me know if you liked this article on Twitter [@argyleink](https://twitter.com/argyleink) \nCode is also on GitHub https://www.npmjs.com/package/rxstatestore\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}