Composition

A Superpower explained

"a whole mess of useful functional programming helpers"

Composition
 

mechanism to combine simple functions to build more complicated ones

const users = [
  { name: "Max", joined: 2007 },
  { name: "Patrick", joined: 2001 },
  { name: "Ali", joined: 2009 },
  { name: "Ben", joined: 2002 }
];

The goal is to have a function that

- sorts the list by the users joined date and

-only returns the user’s names.

const namesSortedByJoined = (users) => {
  const sortedUsers = _.sortBy(users, 'joined');
  return _.map(sortedUsers, (user) => user.name);
}

const namesSortedByJoined = compose(
  map((user) => user.name),
  sortBy('joined'),
)

_.map(users, (user => user.name))


_.map((user => user.name), users)

Flipping the arguments

compose(funcC, funcB, funcA) == pipe(funcC, funcB, funcA)

const UserForm = ({ name, setName, age, setAge }) => (
  <form>
    <input
      type="text"
      value={name}
      onChange={(event) => setName(event.target.value)}
    />
    <input
      type="number"
      value={age}
      onChange={(event) => setAge(event.target.value)}
    />
  </form>
)

const enhanceWithName = withState('name', 'setName', null)
const enhanceWithAge = withState('age', 'setAge', null)
const enhance = compose(enhanceWithName, enhanceWithAge)

export default enhance(UserForm)

const User = ({ data }) => (
  <div>{data.user && data.user.name}</div>
)

const UserQuery = gql`
  query Query() {
    user(userId: $userId) {
      name
    }
  }
`

const enhance = compose(
  withRouter,
  graphql(UserQuery, {
    options: props => ({
      variables: {
        userId: props.params.userId,
      },
    }),
  }),
)
export default enhance(User)

How to make your APIs composable?

const pastelize = compose(
  tint(0.3),
  lighten(0.3),
  saturate(0.2)
);

const pastelRed = pastelize('red');
const pastelMagenta = pastelize('magenta');