falx

single state management for JavaScript applications

installation

npm i -S falx

usage

import {store, subscribe, register} from 'falx'

const reducer = {
    state: [],
    actions: {
        add(state, text) {
          const todo = {
            id: getNextId(),
            done: false,
            text
          }
          return state.concat(todo)
        },
        done(state, id) {
            return state.map(todo => {
              if (todo.id == id) {
                return {
                  ...todo,
                  done: !todo.done
                }
              }
              return todo
            })
        },
        remove(state, id) {
            return state.filter(todo => todo.id != id)
        }
    }
}

const TODOS = 'todos';
const todoList = document.querySelector('#todos');

register(TODOS, reducer);
subscribe(TODOS, state => {
    const html = state.todos.map(todo => `
        <li ${todo.done ? 'class="completed"' : ''} >
          <div class="view">
            <input class="toggle" type="checkbox" id="${todo.id}" ${todo.done ? 'checked' : ''} />
            <label>${todo.text}</label>
            <button class="destroy" id="${todo.id}"></button>
          </div>
          <input class="edit" value="${todo.text}" />
        </li>
   `);
   todoList.innerHTML = html.join('')
});

TodoApp demo

with React

import React, {PureComponent} from 'react'
import {subscribeHOC} from 'falx-react'


const reducer = {
    state: {
        value: 0
    },
    actions: {
        up(state) {
            return {
                ...state,
                value: state.value + 1
            }
        },
        down(state) {
            return {
                ...state,
                value: state.value - 1
            }
        }
    }
};

const COUNTER = 'counter';

register(COUNTER, reducer);

@subscribeHOC(COUNTER)
class Counter extends PureComponent {
    render() {
        return (
            <div>
                <div id="value">
                    {this.props.counter.value}
                </div>
                <button id="up" onClick={this.props.up} >up</button>
                <button id="down" onClick={this.props.down} >down</button>
            </div>
        )
    }
}

falx-react
live demo

async actions

to make action async just return promise

const reducer = {
    state: {
        value: 0
    },
    actions: {
        tick(state, inc = 1) {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve({
                        ...state,
                        value: state.value + inc
                    })
                }, 100)
            })
        }
    }
}

connect redux devtools

import {connectDevtools} from 'falx-redux-devtools'


connectDevtools(
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

falx-redux-devtools

middleware

import {use} from 'falx'
const middleware = (store, statePromise, action) => {
    console.log('action', action);
    return statePromise.then(state => {
        console.log('next state', state);
        return state
    })
}

API

store

store.getState()

getter

register('timer', reducer);
store.time.tick(2)

store.subscribe(cb: Function)

store.dispatch(action)

store.dispatch({
    type: 'ACTION_TYPE'
})

subscribe(name: string, cb: Function)

unsubscribe()

const subscription = subscribe('timer', reducer);
subscription.unsubscribe()

register(name: string, reducer)

const reducer = {
    state: {
        value: 0
    },
    actions: {
        tick(state) {
            return {
                ...state,
                value: state.value + 1
            }
        }
    }
}

remove(name: string)

use(middleware: Function)

const middleware = (store, statePromise, action) => {
    console.log('action', action);
    return statePromise.then(state => {
        console.log('next state', state);
        return state
    })
}

unuse(middleware: Function)