coflux

Flux at the component level.

App state is a dependency of your components. Coflux makes your components define it's own dependencies and actions. This steals the concepts of Relay, with some API ideas from Redux, but with less boilerplate, and more guidance.

Example

// app.js

import { Provider } from 'coflux';
import User from '../User';

const defaultStore = {
  user: {
    firstName: 'foo',
    lastName: 'bar',
    id: 123,
    loggedIn: true,
  },
};

ReactDOM.render(
  <Provider store={defaultStore}>
    <User />
  </Provider>,
  domNode
);

// User.js
import { wrap } from 'coflux';

function User({firstName, lastName, actions}) {
  return (
    <div>
      <div>{firstName} {lastName}</div>;
      <button onClick={actions.logOut}>Log Out</button>
    </div>
  );
}

export default wrap(UserComponent, {
  mapStateToProps() {
    return {
      firstName: 'user.firstName',
      lastName: 'user.lastName',
      id: 'user.id',
      loggedIn: 'user.loggedIn',
    };
  },

  actions: {
    logOut(props, next) {
      asyncActionToLogOut(props.id).then(response => {
        next({loggedIn: false});
      });
    },
  },
});