wrap

The wrap API is where the magic of coflux comes in. The idea is simple, wrap takes two arguments, a React component, and a configuration object. The configuration object describes the components state and action requirements.

The configuration object cares about two specific keys: mapStateToProps:function and actions:Object<Function>. The first one describes the state this component needs. The second describes the actions this component can perform.

A few things to note:

• ACTION_TYPE / Constants are not used.
• actions are bound with the values from mapStateToProps.
• Components observe the state specified and receive updates when they change.
• Components can almost always be functional components

Click here for API details:

• mapStateToProps
• actions

Here is an example of using wrap:

// UserProfile/index.jsx
import { wrap } from 'coflux';
import MODES from './APP_MODES';

function UserProfile({
  actions,
  firstName,
  lastName,
  profilePicUri,
}) {
  return (
    <div>
      <ProfilePic uri={profilePicUri} />
      <div>{firstName} {lastName}</div>
      <button onClick={actions.enterEditMode}>Edit</button>
    </div>
  );
}

export default wrap(UserProfile, {
  mapStateToProps() {
    return {
      firstName: 'user.firstName',
      lastName: 'user.lastName',
      profilePicUri: 'user.pictureurl',
      _mode: 'app.MODE', // the underscore has meaning, more on this later
    };
  },

  actions: {
    enterEditMode(state, next, ...args) {
      next({_mode: MODES.EDIT});
    }
  }
}

Coflux will reconcile all components based on their (and their children/grandchildren) state requirements. With this example, this component will only update if firstName, lastName, or pictureurl get updated by another component.

It is important to know that if a component renders a wrapped child or grandchild, it may get updated based on their dependencies.