re-frame

a.k.a what redux should have been

About me

​

{ :name "Boogie"

:job #{"Staff Engineer", "Ocasional Door Fixer"}

:job-translation "Basically, i write code..."

:company "Victory Square Partners"

:social { :twitter "@_boogie666_" }}

​

​

This is not JSON btw, it's EDN, look it up, i had to sneak in a little clojure :P

What redux does well

1. Global Immutable State
2. Purely functional state transformation (i.e. reducers)
3. Relatively decent way to access state (i.e. selectors or just simple functions)

​

What redux does poorly

1. It's synchronous (i.e. any side effect must be handled outside of redux)
2. The only thing you can "update" from within redux is the "state"

​

What redux does poorly - possible fixes

1. redux-thunks to do api calls and other stuff... BAD - pollutes reducers
2. redux "rx.js" thingy BAD - see above
3. redux-ANY-MIDDLWARE-EVER - AGAIN SEE ABOVE

So what do?

1. Don't make the assumption that "state" change is the only "effect"
2. Profit!

What is re-frame?

Primarily it's two things:

1. It's micro-framework ( for clojurescript ) See here
2. It's an architectural pattern ( for any language ) See this talk

The BIG Idea - a layer of indirection

​

​

Make "events" produce "effects" and handle them outside of the effect handler, thus keeping the effect handlers pure.

Wait a minute.... WTF is?

1. What is an "effect"?
2. What is an "event"?
3. What is an "eventHandler"?
4. What is an "effectHandler"?

The building blocks of re-frame

1. Events - a click, a result of a http call, a call from a socket (i.e. the things we 'dispatch')
2. Effects - a description of things that are about to happen.

​

​

​

​

There's other bits in the original framework, but they are not important for the main thing

Events

<button onClick={() => dispatch(someEvent)}>Click Me!</button>

​

​

​

​

Just like redux

Effects

function clickMe({ state }, event){

return {

state: < somehow update the state >

http: < describe in data the http call >

};

}

​

state and http are effects (i.e descriptions of things that are about to happen)

​

Let's see some code

​

A an example i've setup this, this a "real world example" of this architecture in action.

​

​

Actual link:

https://gitlab.com/boogie666/jsreframe-real-world-example