getting started with Flux using AltJS in a React application
Chris Laughlin
who am i?
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?
altjs
By Chris Laughlin
altjs
Getting Started with flux using Alt JS
- 1,270