Nonstop Pet Mewing

    relogic

    0.3.3 • Public • Published

    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

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import { createMemory, Relogic, withLogic } from 'relogic';

    prepare all your small pieces of logic

    import history from 'path/to/history/library';
     
    const resources: {
        authentication: { url: '/authentication} 
    };
     
    const api = {
        fetchCreate: (resource, params) => fetch(resource.url, params)
    };
     
    const localStorageLogic = localStorage => {
        rememberToken: token => localStorage.setItem('token', JSON.stringify(token))
    };
     
    const historyLogic = history => {
        return Object.assign({}, history, {
            redirectToEntry: () => history.push('/entryPage')
        });
    }

    combine them in a unique object, the application logic

    const userLogic = ({ resources, api, localStorage, history }) => {
     
        async login(name, password) {
     
            const { token } = await api.fetchCreate(
                resources.authentication,
                { name, password }
            );
     
            localStorage.rememberToken(token);
     
            history.redirectToEntry();
        }
    };
     
    const logic = {
        user: userLogic({ 
            resources, 
            api, 
            localStorage: window.localStorage, 
            history 
        })
    };

    and inject the logic into all your components via a memory object.

    const memory = createMemory();
    memory.setLogic(logic);
     
    ReactDOM.render(
        <Relogic memory="memory">
            <App />
        </Relogic>,
        document.getElementById('root')
    );

    And then, you can use it wherever you want

    // somewhere down the hierarchy
     
    class Login extends React.Component {
     
        /* all the lifecycle */
     
        render() {
            const { login, /* other properties like name and password */ } = this.state;
            return (
                <form className="Login"
                      onSubmit={(e) => {
                                   e.preventDefault(); 
                                   login(name, password);    
                               }}>
     
                    { /* your inputs... */ }
                </form>
            );      
        }
    };
     
    export default withLogic(
        ({ getLogic }, props) => {
            return {
                login: getLogic().user.login;
            };
        }
    )(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.

    Install

    npm i relogic

    DownloadsWeekly Downloads

    8

    Version

    0.3.3

    License

    MIT

    Last publish

    Collaborators

    • msuperina