NEXT勉強会: React + Flux architecture

Flux architecture using Reflux library

• React is only the view layer, Flux architecture is used to manage data and actions.
• "top-to-down" approach: data only changes at the top level

1. React "FluxContainer" component

• Component connected to flux stores and actions.
• Listens to the store and the actions and update pass down data store and action using props.
• This is the only component that has a state.

javascript

var CybozuBackupFluxContainer = React.createClass({
  componentDidMount: function() {
    //Listen to any change from the store (@trigger() in the store)
    actions.getData();
    this.listenTo(store, this.onChangeStore);

  },
  onChangeStore: function(storeData) {
    //Store has changed => update the view.
    this.setState(storeData);
  },
  render: function() {
    return (
      <CybozuBackup
        storeData={ this.state }
        onToggleBackup={ actions.toggleBackup }
        onChangeGenerationNumber={ actions.changeGenerationNumber }
        onChangeRestoreDate={ actions.changeRestoreDate }
        onSubmitRestore={ actions.submitRestore }
        onStartTour={ actions.startTour }
      />
    );
  }

});

2. React state-less components

React components without state, only render props that come from the parent component.
(they receive everything using props)

var CybozuBackup = React.createClass({

  render: function() {
    return (
      <div id="content">

        <Logo />

        <h1>バックアップ / リストア</h1>

        { this.props.storeData && (
          <div>

            <BackupSettings {...this.props} />

            <Restore {...this.props} />

          </div>
        ) }
      </div>
    );
  }

});

3. Flux actions

First step: define the actions.
2 kind of action: synchronous and asynchronous (ajax)

actions = Reflux.createActions
  "getData":
    asyncResult: true

  "toggleBackup": {}
  "changeGenerationNumber": {}
  "showModalBackup": {}
  "submitBackup": {}

  "changeRestoreDate": {}
  "showModalRestore": {}
  "submitRestore": {}

  "startTour": {}

Launch an action:

actions.toggleBackup(data)

Listen to action:

actions.getData.listen () ->
  api.actions.request('cybozuBackupGetData', null, this)

4. Flux stores

Store can listen to action and trigger callbacks.
For example .onToggleBackup() method is automatically called when toggleBackup action is called.

store = Reflux.createStore
  listenables: [actions]

  onToggleBackup: (enabled) ->
    console.log 'toggleBackup action listener', enabled
    @enabled = enabled

    #Reset backup size to its initial value
    if !enabled
      @generationNumber = @initialSettings.generationNumber

    @hasChanged = true
    @trigger @getState()