getting started with Flux using AltJS in a React application

Chris Laughlin

who am i?

JavaScript Developer @Rapid7

 

Open source contributor   

 

All round JavaScript nerd

Jack of all trades, master of none

what is flux

Flux is a application architecture for building user interfaces.

Flux replaces conventional MV* patterns in favour of a unidirectional data flow

Unidirectional Data

react before flux

import React from 'react';

class HelloWorld extends React.Component {
    constructor(props) {
        this.state = {};  
    }
    
    componentDidMount() {
        Fetch().then((data) => {
            this.setState({data})
        )
    
    render() {
        return (
            <div className='hello-world'>
                {this.state.data}
            </div>
        );
    }
}

export default HelloWorld;

State example

Flux Example

Setting up alt

import Alt from 'alt';

const flux = new Alt();
export default flux;
//Simples!

Store

import flux from 'control';
import {createStore, bind} from 'alt-utils/lib/decorators';
import actions from 'actions/myAction';

@createStore(flux)
class MyStore {
    constructor() {
        this.state = {
            myData: []
        };
    }

    @bind(actions.setMyData)
    setMyData(myData) {
        this.setState({myData});
    }
}

export default MyStore;

ACtion

import flux from 'control';
import {createActions} from 'alt-utils/lib/decorators';
import MyStore from 'stores/myStore';

@createActions(flux)
class MyActions {

    constructor() {
        this.generateActions(
            'setMyData'
        );
    }

    fetchData() {
        //Fake async
        setTimeout(() => {
            this.setMyData(data);
        }, 1000);
    }

}

export default MyActions;

View

import React from 'react';
import connectToStores from 'alt-utils/lib/connectToStores';

import DataItem from 'components/dataItem';
import MyStore from 'stores/myStore';
import MyActions from 'actions/myActions';

@connectToStores
class MyDataList extends React.Component {

    constructor(props) {
        super(props);
    }

    static getStores() {
        return [MyStore];
    }

    static getPropsFromStores() {
        return MyStore.getState();
    }

    componentDidMount() {
        MyActions.fetchMyData();
    }

    renderDataList = () => {
        return this.props.myData.map((data) => {
            return <DataItem {...data} />
        })
    };

    render() {
        return (
            <div>
                {this.renderDataList()}
            </div>
        );
    }
}

export default MyDataList;

but wait there's is more

snapshots

import Flux from 'myFluxInstance';
console.log(Flux.takeSnapshot());
//Prints all stores state

console.log(Flux.takeSnapshot(myStore));
//Prints all the state for the provided store(s)
class Store {
  constructor() {
    this.on('snapshot', () => {
      // process data before sending snapshot
    });
  }
}

bootstrapping

Flux.bootstrap(JSON.stringify({
  MyStore: {
    some: 'value',
    more: 'values'
  }
}));
class Store {
  constructor() {
    this.on('bootstrap', (data) => {
      // process data before adding to store
    });
  }
}

recycle 

// recycle just MyStore
Flux.recycle(MyStore);

// recycle all stores
Flux.recycle();
class Store {
  constructor() {
    this.on('init', () => {
      // do something here
    }):
  }
}

thanks!

questions?

Made with Slides.com