@4geeksacademy/react-flux-dash 中文文档教程

Question

React Flux Dash

学flux难，用起来麻烦。 希望这个库会变得更容易！

此外，学习 redux 更难，所以这是让你的生活更轻松的状态库

Dash 是一系列编码指南和原则，以简单、传统、干净和富有表现力的方式编码。

支持该库的原则和指南是：

1) 定义商店应该是一个简单的步骤，保持“单一来源”的力量 2）数据和事件传播应该以声明的方式进行 3）视图应该以被动的方式开发。 4）允许多个商店以更好地组织 5) 我们保持通量，因为它应该是单向的，所以 Action 和 View 之间没有耦合，Action 和 Store 之间没有耦合，Store 和 View 之间也没有耦合 6) Store状态是隐含的：Store上所有事件的最后一个值。

Installation

1. Run on your terminal the following command:

$ npm install @4geeksacademy/react-flux-dash --save

2. To import the library anywhere you would like to use it:

import Flux from '@4geeksacademy/react-flux-dash';

Let's build a Flux Workflow for authentication

1) First, declare your Store

import Flux from '@4geeksacademy/react-flux-dash';

class SessionStore extends Flux.DashStore{
    constructor(){
        super();
        // Declare an Event
        this.addEvent("onLogout");
        // 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"})
        });
    }
}
export default new SessionStore();

2) Registering with the Store changes

import React from 'react';
import SessionStore from '/path/to/store';

class View extends React.Component {
      constructor(){
          super();
      }

      componentDidMount() {
          const me = this;
          this.loginSubscription = SessionStore.subscribe("login", (state) => {
              // Do something usefull with the Event Data
              me.userName = state.user.name;
          });
          // Register some method
          this.logoutSubscription = SessionStore.subscribe("logout", this.logOutEvent().bind(this));
      }

      logOutEvent(state){
        //DO something with the state or the state of the Store
        const storeState = SessionStore.getState()
      }

      componentWillUnMount() {
          // Don't forget to release the subscription
          this.loginSubscription.unsubscribe();
          this.logoutSubscription.unsubscribe();
      }
  }

3) Define some action that will trigger the event

import Flux from '@4geeksacademy/react-flux-dash';

const authenticateAction = (username, password)=> {
      // Don't forget to Validate the data ex: username !=== undefined
      let dataToSave = {
          authenticated: true
      }
      Flux.dispatchEvent('login', dataToSave)
}

export default {authenticateAction};

4) Glue all together using the Action from the View

import React from 'react';
import SessionStore from '/path/to/store';
import {authenticateAction} from 'path/to/action';

class View extends React.Component {
      constructor(){
          super();
      }

      componentDidMount() {
          const me = this;
          this.loginSubscription = SessionStore.subscribe("login", (state) => {
              // Do something usefull with the Event Data
              me.userName = state.user.name;
          });
          // Register some method
          this.logoutSubscription = SessionStore.subscribe("logout", this.logOutEvent().bind(this));
      }

      logOutEvent(state){
        //DO something with the state or the state of the Store
        const storeState = SessionStore.getState()
      }

      componentWillUnMount() {
          // Don't forget to release the subscription
          this.loginSubscription.unsubscribe();
          this.logoutSubscription.unsubscribe();
      }

      login(){
        authenticateAction(this.state.username, this.state.password);
      }

  }

变更日志：

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