Relogic
An abstraction to encapsulate flows of logic in React applications.
There is a demo and an
API
with full documentation.
Install
npm install --save-dev relogic
What is it ?
A simple way to organize the logic in React applications.
The idea is fairly simple: everything not enclosed in the lifecycle of a component can be either enclosed in the lifecycle of a parent component or is completely unrelated to any view.
relogic gives you a way to separate the code unrelated to the views and put it into an object passed to all the components.
You simply import
;;;
prepare all your small pieces of logic
; const resources: authentication: url: '/authentication' }; const api = ; const localStorageLogic = { localStorage}; const historyLogic = { return Object;}
combine them in a unique object, the application logic
const userLogic = { async { const token = await api; localStorage; history; }}; const logic = user: ;
and inject the logic into all your components via a memory
object.
const memory = ;memory; ReactDOM;
And then, you can use it wherever you want
// somewhere down the hierarchy Component /* all the lifecycle */ { const login /* other properties like name and password */ = thisstate; return <form ="Login" => /* your inputs... */ </form> ; }; getLogic props return login: userlogin; ; Login;
OK, but what do I get with that ?
Well, you have just created a flow of logic.
It takes some dependencies as input which implies you can test them really easily and separately, you don't need to stub anything, and you can do integration tests more quickly.
Your whole application is now just a function which takes some dependencies as
input, performs some computations, perhaps asynchronously, and renders views
with their own lifecycle.
Basically, bootstrapping the application becomes a controlled process.
And now, since you create flows and inject them, you can also replace them...
Have a look at the demo to see
how you can time travel in an application with both Redux and React Router.