@iosio/capsule NPM

@iosio/capsule

Simple global state and convenience tool for React.

Key Features

Shared centralized state and logic.
~3KB minified + gzipped.
No dispatching and no reducers!
As a bonus, capsule includes a simple, ultra light, 1-2 level nested Router component, Link component and a slim routing API. See the routing docs for more info.

Installation

npm install @iosio/capsule --save

Basic Usage

For more info, check out the docs or view the demo code

Start by including the CapsuleProvider at the root of your app

//index.js
import React from 'react';
import {CapsuleProvider} from '@iosio/capsule';
import {render} from 'react-dom'
import {App} from './App';

 const Root = () => (
    <CapsuleProvider>
        <App/>
    </CapsuleProvider>
);

render(<Root/>, document.querySelector('#root'));

Use Capsule to create portable logic and state

//logic.js
import {Capsule} from '@iosio/capsule';
import {client} from './client';

export const myTodoLogic = Capsule({
    name: 'myTodos',
    initialState: {
        fetching: false,
        list: [],
    },
    logic: ({set, merge}) => ({
        getSetTodos: async () => {
            set.fetching(true);
            const list = await client.getTodos();
            merge({fetching: false, list});
        }
    })
})();//<-optionally call curried function to store logic to variable

And use Capsule to connect state and logic to your components.

//App.js
import React from 'react';
//make sure your isolated logic capsules 
//are in scope somewhere near the root of your app
import './logic'; // <- as in here, a dedicated capsule index, or the app index.js file
import {Capsule} from '@iosio/capsule'
import {LoadingIndicator} from './components/LoadingIndicator';

// make selections by using comma separated values or functions
export const App = Capsule({
    mapState: {myTodos: 'fetching,list'}, 
    mapLogic: ({myTodos}) => ({ getSetTodos: myTodos.getSetTodos })
})(({list, fetching, getSetTodos}) => (
    <div>
        <Button onClick={getSetTodos} text={'GET MY TODOS!'}/>
            {fetching ?
                <LoadingIndicator/> :
                <ul>
                    {list.map((item) => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
            }
    </div>
));

Capsule if flexible

//demonstrating returned actions if logic property is omitted
const myTodoActions = Capsule({
    name: 'myTodos',
    initialState: {
        fetching: false,
        list: [],
    }
})();

const getSetTodos = async () => {
  const {set, merge} = myTodoActions;
  set.fetching(true);
  const list = await client.getTodos();
  merge({fetching: false, list});
}

Alternative arguments

See Alternative Arguments for more info.

export const myTodoLogic = Capsule('myTodos',
    {fetching: false, list: []},
    ({set, merge}) => ({
        getSetTodos: async () => {
            set.fetching(true);
            const list = await client.getTodos();
            merge({fetching: false, list});
        }
    })
)();