npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cobuildlab/react-flux-state

v2.2.7

Published

React bindings for flux-state

Downloads

39

Readme

##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