Nibbling Pastry Monster

    @cobuildlab/react-flux-state

    2.2.7 • Public • Published

    ##NOTE: This library is not longer going to be maintained. However, the efforts for a simple state management continue here: react-simple-state

    React Flux State

    React bindings to flux-state Library

    This package ads a subscribe method to the standard React Component to avoid the unsubscribe boilerplate from the library, AKA: it does the unsubscribe for you.

    Installation

    1. Run on your terminal the following command:
    $ npm i --save-dev @cobuildlab/react-flux-state
    1. To import the library anywhere you would like to use it:
    import View, {useFluxStore} from '@cobuildlab/react-flux-state';

    Docs

    Object Description
    View Subclass of React.View that includes a this.subscribe method to subscribe to changes on a Store.
    useSubscription A hook for subscribe to specific events with a callback.
    useEvent A declarative and more powerfull alternative to the useSubscription.

    View

    • Allows you to create subscription to stores from Class based components
    • It handles the subscription lifecycle

    Example

    useSubscription(store, eventName, callback)

    • It subscribes to stores from functional components using hooks.
    • It handles the subscription lifecycle

    Example

    useEvent(stire, eventName, initialValue, reducer)

    • It subscribes to stores from functional components using hooks with a declarative approach.
    • It handles the subscription lifecycle
    • It handles initial values for the events
    • It handles a reducer function for the state.

    Example

    Examples

    Let's build a Flux Workflow for authentication

    1) First, declare your Store

    import Flux from 'flux-state';
    
    // Declare the events as constants. They are exported for reference in the subscriptions
    export const LOGOUT = 'onLogout';
    export const LOGIN = 'onLogin';
    
    
    class SessionStore extends Flux.Store{
        constructor(){
            super();
            // Declare an Event
            this.addEvent(LOGOUT);
            // Or Declare an event with some imutable transformation logic
            this.addEvent(LOGIN, (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(LOGIN, (state) => {
                state.some_other_property = "Some other Data";
                return Object.assign(state, {"key": "value"})
            });
        }
    }
    const sessionStore = new SessionStore()
    export {sessionStore} ;

    2) Registering with the Store changes

    import React from 'react';
    import {LOGIN, LOGOUT, sessionStore } from '/path/to/store';
    import View, {useSubscription, useEvent} from '@cobuildlab/react-flux-state';
    
    // Class Based
    class View extends View {
          constructor(){
              super();
          }
          componentDidMount() {
              this.subscribe(sessionStore , LOGIN, (state) => {
                  // Do something usefull with the Event Data
                  const userName = state.user.name;
                  this.setState({userName});
              });
              // Register some method
              this.subscribe(sessionStore , LOGOUT, this.logOutEvent);
          }
    
          logOutEvent = (state) => {
            //DO something with the state or the state of the Store
            const storeState = sessionStore .getState()
          }
      }
    
    // or Functional with React Hooks
    const View = (props) => {
      // Set an Initial Value
      const loginState = useEvent(sessionStore , LOGIN);
      const userState = useEvent(sessionStore , USER, null, (state) => state.user);
      
      useSubscription(sessionStore , LOGIN_ERROR, (state) => {
        // setError
        // toast.error()
      });
      
      return (
        {loginState && <User user={loginState}>}
      )
    };

    3) Define some action that will trigger the event

    import Flux from 'flux-state';
    import {LOGIN, LOGOUT} from '/path/to/store';
    
    const authenticateAction = (username, password)=> {
          if (username === undefined)
            return Flux.dispatchEvent(LOGIN_ERROR);
          
          let dataToSave = {
              authenticated: true,
              username,
              password,
          }
          Flux.dispatchEvent(LOGIN, dataToSave)
    }
    
    export default {authenticateAction};

    Changelog

    v2.2.0:

    • React Hook useEvent replaces useFluxStore

    v2.1.0:

    • React Hook useSubscription no place a callback on Store events

    v2.0.0:

    • React Hook Implementation signature changed, now receives a callback to be executed when the event is triggered: useFluxStore

    v1.0.0:

    • React Hook Implementation: useFluxStore
    • Migration to @cobuildlab/react-flux-store

    Contributors

    Keywords

    none

    Install

    npm i @cobuildlab/react-flux-state

    DownloadsWeekly Downloads

    28

    Version

    2.2.7

    License

    GPL-3.0

    Unpacked Size

    30.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • galue99
    • alacret
    • nodejose
    • lesha12012