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:
- Define a Store should be an easy step, keeping the power of a "Single source of truth"
- Data and event propagation should be done in a declarative way
- Views should be developer in a reactive way.
- Multiple Stores are allowed for better organization
- 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
- The Store state is implicit: The last value of all the events on the Store.
Installation
- Run on your terminal the following command:
$ npm install flux-state --save
- To import the library anywhere you would like to use it:
;
Let's build a Flux Workflow for authentication
1) First, declare your Store
; const LOGOUT_EVENT = 'onLogout';const LOGIN_EVENT = 'onLogin';const SESSION_EVENT = 'onSession'; DashStore { super; // Declare an Event this; // Or Declare an event with some immutable transformation logic this; // Or Declare an event with some plain transformation logic this; } const sessionStore = ;;
2) Registering with the Store changes
;; Component { super; const user = sessionStore; thisstate = isLogged: !!user } { thisloginSubscription = sessionStore; // Register some method thislogoutSubscription = sessionStore; } { // Don't forget to release the subscription // Save time by using react bindings // See (react-flux-state)[https://github.com/cobuildlab/react-flux-state] thisloginSubscription; thislogoutSubscription; }
3) Define some actions that will trigger the event
;; const authenticateAction = async { // Don't forget to Validate the data ex: username !=== undefined let dataToSave = authenticated: true try await catch e Flux; Flux;} ;
4) Glue all together using the Action from the View
;;; Component { super; } { const me = this; thisloginSubscription = sessionStore; // Register some method thislogoutSubscription = sessionStore; } { //DO something with the state or the state of the Store const storeState = sessionStore; } { // Don't forget to release the subscription thisloginSubscription; thislogoutSubscription; } { ; }
ChangeLog:
v 4.1.0
store.getState()
returns a clone of the state object
v 3.0.0
- 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
- Alejandro Sanchez github.com/alesanchezr alesanchezr.com
- Angel Lacret github.com/alacret
- Allan Thinks github.com/alanthinks