fluxible-plugin-store-execute-action v0.2.2

fluxible-plugin-store-execute-action

A temporary solution to get the executeAction() method on the Store Context for initiating async query actions.

This plugin will be redundant once a proper solution is implemented for yahoo/fluxible#15.

npm install fluxible-plugin-store-execute-action 

Usage

Stores can execute actions via the StoreContext. As is the case for components, store actions should be fire and forget and, therefore, a promises is not returned nor a done callback supported. Success or failure of the asynchronous operation should be handled by dispatching appropriate actions.

See the code examples below.

Application Bootstrap

// common.js

import StoreExecuteActionPlugin from 'fluxible-plugin-store-execute-action';
app.plug(StoreExecuteActionPlugin());

// server.js

const context = app.createContext({});

// When using React-Router for example:
router.run((Root, routerState) => {
  const componentContext = context.getComponentContext();

  // Components retrieve data from stores in a static `routeQuery` method. Since the
  // stores don't have cached data they execute async actions to retrieve it.
  routerState.routes
    .filter(route => route.handler.routeQuery)
    .forEach(route => route.handler.routeQuery(routerState.params, componentContext));

  // Retrieve the promise of all outstanding async actions and render once it resolves.
  app.getPlugin('StoreExecuteActionPlugin').getStoreQueryPromise()
    .then(() => {
      // All necessary data has now been read into stores
      // Proceed to render Root as usual...      
    })
    .catch(err => console.log(err));
})

// client.js

// No special actions required.

Use within Stores

// findAction.js

function findAction(actionContext, payload) {

  return actionContext.queryUtils.find(payload)
    .then(records => {
      actionContext.dispatch('RECEIVE_RECORDS', records);
      return records;
    });
}

// SomeStore.js

class SomeStore extends BaseStore {

  getRecord(id) {
    if (this.records[id]) {
      // Return the record if it exists.
      return this.records[id];
    }
    
    // Or execute a query action...
    this.getContext().executeAction(findAction, {/*Query payload*/});
    
    // Potentially set a 'loading' flag here.
  }
  
  handleReceiveRecords(payload) {
    payload.records.forEach(recordData => this.records[recordData.id] = recordData);
    // Clear 'loading' flags.
    this.emitChange();
  }
}

SomeStore.handlers = {
  'RECEIVE_RECORDS': 'handleReceiveRecords'
};

License

This software is free to use under the MIT license. See the LICENSE file for license text and copyright information.