flu

fludux

Easily connect your React components to Flux stores

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

2.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Fludux

Build Status npm version codecov.io

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';

Additionally, Fludux provides store creation utility functions `createStore` and `createDispatcherCallback` that can help you create a store with a state reducer function. You do not have to use these in order to use `connectToStore` or `connectToStores`.
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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100