https://github.com/hung-phan/rails-react-flux-csp

This project is an attempt to implement Flux architecture for React.js in js-csp: https://github.com/ubolonton/js-csp
https://github.com/hung-phan/rails-react-flux-csp

Last synced: about 10 hours ago
JSON representation

This project is an attempt to implement Flux architecture for React.js in js-csp: https://github.com/ubolonton/js-csp

• Host: GitHub
• URL: https://github.com/hung-phan/rails-react-flux-csp
• Owner: hung-phan
• Created: 2015-03-15T02:54:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-04-27T15:54:21.000Z (over 9 years ago)
• Last Synced: 2024-04-10T20:39:01.078Z (7 months ago)
• Language: Ruby
• Size: 344 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Template

Generated by [generator-rails-react-webpack](https://github.com/hung-phan/generator-rails-react-webpack).

## Structure

![alt text](https://raw.githubusercontent.com/facebook/flux/master/docs/img/flux-diagram-white-background.png "Flux architecture")

The implementation folder is placed at `app/frontend/javascripts/`, which will be compiled by [webpack-dev-server](http://webpack.github.io/docs/webpack-dev-server.html)

later.

## Idea

Instead of [facebook/flux](https://github.com/facebook/flux) implementation, can we make communication between actions and stores, or

stores and components more verbose?

### The actions

```javascript

// app/frontend/javascripts/actions.js

csp.putAsync(sourceChan, { store: StoreDetails.AppStore, actionType: Constants.ADD_ITEM, item: item });

// app/frontend/javascripts/store/app-store.js

csp.operations.pub.sub(publication, StoreDetails.AppStore, inChan);

csp.go(function*() {

  let payload;

  while ((payload = yield inChan)!== csp.CLOSED) {

    switch (payload.actionType) {

      case Constants.ADD_ITEM:

        _handlers.addItem(payload.item);

        break;

      case Constants.REMOVE_ITEM:

        _handlers.removeItem(payload.index);

        break;

      case Constants.INCREASE_ITEM:

        _handlers.increaseItem(payload.index);

        break;

      case Constants.DECREASE_ITEM:

        _handlers.decreaseItem(payload.index);

        break;

    }

    // dispatch to the right components from stores

    csp.putAsync(sourceChan, { event: APP_STORE_CHANGE_EVENT, update: true });

  }

});

```

### The stores

Implement a mixin to create process for channel pubsub system instead of event-emitter.