@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
- Run on your terminal the following command:
$ npm i --save-dev @cobuildlab/react-flux-state
- 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
useSubscription(store, eventName, callback)
- It subscribes to stores from functional components using hooks.
- It handles the subscription lifecycle
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.
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
replacesuseFluxStore
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
- Alejandro Sanchez github.com/alesanchezr alesanchezr.com
- Angel Lacret github.com/alacret
- Alan Thinks github.com/alanthinks