No Partying Mariachis

    @cobuildlab/flux-state

    1.2.2 • Public • Published

    Flux State

    Learning flux is hard, using it is cumbersome. Hopefully it will become easier with this library!

    Also, learning redux is harder, so this is state library that make your life easier

    The principles and guidelines supporting this Library are:

    1. Define a Store should be an easy step, keeping the power of a "Single source of truth"
    2. Data and event propagation should be done in a declarative way
    3. Views should be developer in a reactive way.
    4. Multiple Stores are allowed for better organization
    5. We keep flux as it should be unidirectional, so there is no coupling between the Action and the Views, neither between the Actions and the Store, neither between the Store and the View
    6. The Store state is implicit: The last value of all the events on the Store.

    Installation

    1. Run on your terminal the following command:
    $ npm install @cobuildlab/flux-state --save
    1. To import the library anywhere you would like to use it:
    import Flux from '@cobuildlab/flux-state';

    Let's build a Flux Workflow for authentication

    1) First, declare your Store

    import Flux from '@cobuildlab/flux-state';
    
    export const LOGOUT_EVENT = 'onLogout';
    export const LOGIN_EVENT = 'onLogin';
    export const SESSION_EVENT = 'onSession';
    export const NEW_EVENT = 'onEvent';
    
    class SessionStore extends Flux.DashStore{
        constructor(){
            super();
            // Declare an Event
            this.addEvent(LOGOUT_EVENT);
            // Or Declare an event with some immutable transformation logic
            this.addEvent(LOGIN_EVENT, (state) => {
                // Do something with the data before propagating the Event
                return Object.assign(state, {"key": "value"})
            });
            // Or Declare an event with some plain transformation logic
            this.addEvent(SESSION_EVENT, (state) => {
                state.some_other_property = "Some other Data";
                return Object.assign(state, {"key": "value"})
            });
            // You can also provide initial Value to  the events
            this.addEvent({eventName: NEW_EVENT, reducers:[], initialValue: {foo: 'bar'} });
        }
    }
    
    const sessionStore = new SessionStore();
    export {sessionStore};

    2) Registering with the Store changes

    import React from 'react';
    import {sessionStore, LOGIN_EVENT, LOGOUT_EVENT, SESSION_EVENT } from '/path/to/store';
    
    export class View extends React.Component {
          constructor(){
              super();
              const user = sessionStore.getState(SESSION_EVENT);
              this.state = {
                isLogged: !!user
              }
          }
    
          componentDidMount() {
              this.loginSubscription = sessionStore.subscribe(LOGIN_EVENT, (state) => {
                  // Do something useful with the Event Data
                  this.setState({some: state.some});
              });
              // Register some method
              this.logoutSubscription = sessionStore.subscribe(LOGOUT_EVENT, this.logOutEvent().bind(this));
          }
    
          componentWillUnMount() {
              // Don't forget to release the subscription
              // Save time by using react bindings
              // See (react-flux-state)[https://github.com/cobuildlab/react-flux-state] 
              this.loginSubscription.unsubscribe();
              this.logoutSubscription.unsubscribe();
          }
      }

    3) Define some actions that will trigger the event

    import Flux from 'flux-state';
    import {LOGIN_EVENT, LOGIN_ERROR} from '/path/to/store';
    
    const authenticateAction = async (username, password)=> {
          // Don't forget to Validate the data ex: username !=== undefined
          let dataToSave = {
              authenticated: true
          }
          
          try {
            await authenticate(username, password)
          }catch (e) {
              Flux.dispatchEvent(LOGIN_ERROR, e.message);
          }
          Flux.dispatchEvent(LOGIN_EVENT, dataToSave);
    }
    
    export {authenticateAction};

    4) Glue all together using the Action from the View

    import React from 'react';
    import {authenticateAction} from 'path/to/action';
    import {sessionStore, LOGIN_EVENT, LOGOUT_EVENT, SESSION_EVENT } from '/path/to/store';
    
    export class View extends React.Component {
          constructor(){
              super();
          }
    
          componentDidMount() {
              const me = this;
              this.loginSubscription = sessionStore.subscribe(LOGIN_EVENT, (state) => {
                  // Do something useful with the Event Data
                  me.userName = state.user.name;
              });
              // Register some method
              this.logoutSubscription = sessionStore.subscribe(LOGOUT_EVENT, this.logOutEvent().bind(this));
          }
    
          logOutEvent(state){
            //DO something with the state or the state of the Store
            const storeState = sessionStore.getState(SESSION_EVENT);
          }
    
          componentWillUnMount() {
              // Don't forget to release the subscription
              this.loginSubscription.unsubscribe();
              this.logoutSubscription.unsubscribe();
          }
    
          login(){
            authenticateAction(this.state.username, this.state.password);
          }
    
      }

    ChangeLog:

    v 1.2.1

    • add addFluxEvent to the store, to provide initialValue
    • add addFluxEvent to the store, to change transformers for a most common name: reducers
    • add addFluxEvent to the store, to provide named parameters

    v 1.1.5

    • Notification for events are now clones from original Data

    v 1.1.4

    • Rollback of async dispatches: They will stay sync for now

    v 1.1.3

    • Now Flux.dispatch uses setTimeout to avoid dispatching in the middle of a Dispatch

    v 1.0.1

    • store.getState() returns a clone of the state object
    • Migrated to @cobuildlab/flux-state

    v 0.0.3

    • Add a clearState method for the Store to set all Values to null
    • Add a parameter to the subscription, to request the last value of the Event if wanted
    • Add a Helper React View, to subscribe and unsubscribe to the Store wanted

    Contributors

    Keywords

    none

    Install

    npm i @cobuildlab/flux-state

    DownloadsWeekly Downloads

    34

    Version

    1.2.2

    License

    GPL-3.0

    Unpacked Size

    425 kB

    Total Files

    15

    Last publish

    Collaborators

    • galue99
    • alacret
    • nodejose
    • lesha12012