Home

Awesome

material-flux Build Status

No magic flux implementation library.

Installation

npm install material-flux

Usage

material-flux is consist of Action, Store and Context.

Flux Architecture

User action -> Action -> Context dispatch -> Store received dispatch -> Store dispatch "change" event -> View received the "change". -> update view.

flow image

Action

import {Action} from "material-flux"
// it's a like constants
export const keys = {
    // "any key" : "any value"
    "doSomething": "unique value"
};
export default class UserAction extends Action {
    doSomething(data) {
        // pass the `data` to Store's `onHandler`
        // call `onHandler(data);`
        this.dispatch(keys.doSomething, data);
    }
}

When you call action, dispatch store's handler.

Store

import {keys} from "./UserAction.js"
import {Store} from "material-flux"
export default class UserStore extends Store {
   constructor(...args) {
       super(...args);
       this.state = {
           userData: null
       };
       this.register(keys.doSomething, this.onHandler);
   }

   // data is come from Action
   onHandler(data) {
       this.setState({
           userData: data
       });
   }

   // just getter method
   getUserData() {
       return this.state.userData;
   }
}

Store#onChange(listener)

Adds a listener to the end of the listeners array for the "change" event.

Store#removeChangeListener(listener)

Removes a "change" listener.

Store#removeAllChangeListeners()

Removes all "change" listeners.

Store#getState()

Return state object that shallowly clone store's state.

Store#setState(object)

Update this.state and emit "change" event.

Context

How to connect Action and Store? => Create connection object. it is called Context in this context.

import UserAction from "./UserAction.js"
import UserStore from "./UserStore.js"
import {Context} from 'material-flux';
export default class UserContext extends Context {
    constructor() {
        super();
        this.userAction = new UserAction(this);
        this.userStore = new UserStore(this);
    }
}

View(Component)

How to connect to View like React? => Pass an instance of Context to React's Component.

import React from 'react';
import UserContext from './UserContext.js';
import App from './AppComponent.jsx';
var context = new UserContext();
React.render(
    React.createElement(App, { context }),
    document.getElementById('main')
);

AppComponent:

import React from 'react';
export default class AppComponent extends React.Component {
    constructor(...args) {
        super(...args);
        this.userStore = this.props.context.userStore;
        this.state = {
            userData: this.userStore.getUserData()
        };
    }

    _onChange() {
        this.setState({
            userData: this.userStore.getUserData()
        });
    }

    componentDidMount() {
        this.userStore.onChange(this._onChange.bind(this));
    }

    componentWillUnmount() {
        this.userStore.removeAllChangeListeners();
    }

    onClick(event) {
        var { context } = this.props;
        context.userAction.doSomething("clicked");
    }

    render() {
        return (
            <div onClick={this.onClick.bind(this)}>
                userData: {this.state.userData}
            </div>
        );
    }
}

Container

If you want to Container Component, use https://github.com/azu/material-flux-container

Examples

more examples.

Tests

npm test
# it run mocha & npm run test:typing.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT

Inspiration and thanks