Fludux

Easily connect your React components to Flux stores

• remove boilerplate from your components
• map Flux stores to props instead of state
• ease your migration from Flux to Redux

Installation

npm install --save fludux

API

Fludux exports two higher order functions to connect to any Flux store: connectToStore and connectToStores.

import { connectToStore, connectToStores } from 'fludux';

import { createStore, createDispatcherCallback } from 'fludux';

connectToStore(store, mapStateToProps, config) -> connector(component)

store (object): your Flux store that exposes changelisteners

mapStateToProps (function): map your stores' state to props

config (object), optional: if your store exposes addChangeListener and removeChangeListener but they have different names, you can set them here. See examples below.

connectToStores(storeMappings) -> connector(component)

storeMapping (array{object}) : an array of objects with the following properties: store , mapStateToProps, config. They work simirlaly as connectToStore arguments.

createStore(initialState) -> store

initialState (object): the initial state object of your state. E.g. {isLoading: false}.

store (object): created Flux store with methods emitChange, addChangeListener, removeChangeListener, getState and setState.

createDispatcherCallback(reducer, store) -> actionCallback(action)

reducer (function): a reducer function that gets previous state as first parameter, and the action object as second parameter. Returns new state. (See an example below).

Examples

Connection to a store: a simple example

Your React component connected to a Flux store without Fludux:

import MyStore from 'MyStore';

function getState() {
  return {
    someValue: MyStore.getSomeValue()
  };
}

const MyComponent = React.createClass({
  getInitialState() {
    return getState();
  },

  componentWillMount() {
    MyStore.addChangeListener(this.onChange);
  },

  componentDidUnmount() {
    MyStore.removeChangeListener(this.onChange);
  },

  onChange() {
    this.setState(getState());
  },

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

export default MyComponent;

Your React component with Fludux:

import { connectToStore } from 'fludux';
import MyStore from 'MyStore';

const MyComponent = React.createClass({
  propTypes: {
    someValue: React.PropTypes.string
  },

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

export default connectToStore(MyStore, store => ({
  someValue: store.getSomeValue()
}))(MockComponent);

Connecting to multiple stores

import { connectToStores } from 'fludux';
import MyStore1 from 'MyStore1';
import MyStore2 from 'MyStore2';

const MyComponent = React.createClass({
  propTypes: {
    someValue1: React.PropTypes.string,
    someValue2: React.PropTypes.string
  },

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

export default connectToStores([
  {
    store: MyStore1,
    mapStateToProps: Store => ({someValue1: Store.getSomeValue() })
  },
  {
    store: MyStore2,
    mapStateToProps: Store => ({someValue2: Store.getSomeValue() }),
    config: {
      addChangeListener: 'myCustomNameForAddChangeListener',
      removeChangeListener: 'myCustomNameForRemoveChangeListener'
    }
  }
])(MockComponent);

Creating a store with createStore and createDispatcherCallback

import { createStore, createDispatcherCallback } from 'fludux';
import AppDispatcher from 'some/where/AppDispatcher';

const INITIAL_STATE = {isLoading: false};

const MyStore = createStore(INITIAL_STATE);

const myStoreReducer = function(state, action) {
  switch (action.type) {
    case 'LOADING_START':
      return {
        ...state,
        isLoading: true
      };

    case 'LOADING_DONE':
      return {
        ...state,
        isLoading: false
      };

    default:
      return state;
  }
}

AppDispatcher.register(createDispatcherCallback(
  myStoreReducer,
  MyStore
));

export default MyStore;

License

MIT