A function that does at least one of the following:
const map = (mapper) => (array) => {
const result = [];
for (item in array) {
result.push(mapper(item));
}
return result;
}
const add = (m) => (n) => m + n;
const add4 = add(4);
add4(2); // 6
const mapArgument = (argumentMapper) => (targetFunction) => {
return (arg) => targetFunction(argumentMapper(arg));
}
const consoleNumber = number => console.log(`The number is: ${number}`);
const enhance = mapArgument(number => number * number);
const consoleDoubledNumber = enhance(consoleNumber);
consoleNumber(2) // The number is: 2
consoleDoubledNumber(2) // The number is: 4
A higher-order component is a function that takes a component and returns a new component.
import React from 'react';
import { connect } from 'react-redux';
const User = ({ username }) => <div>The user is: {username}</div>;
const UserPage = connect(
({ state }) => ({ username: state.user.username })
)(User);
Share the same logic around components
connect(state => ({
firstName: state.user.firstName,
lastName: state.user.lastName
}))(
withHandler({ onClick: () => {} })(
withProps(({ firstName, lastName }) =>
({ name: `${firstName} ${lastName}` }))(
pure(({ name, onClick }) => (
<div onClick={onClick}>The user is: {name}</div>
))
)
)
)
import { compose, withHandler, withProps, pure } from 'recompose';
compose(
connect(state => ({
firstName: state.user.firstName,
lastName: state.user.lastName,
})),
withHandler({ onClick: () => {} }),
withProps(({ firstName, lastName }) => ({
name: `${firstName} ${lastName}`,
})),
pure,
)(({ name, onClick }) => (
<div onClick={onClick}>The user is: {name}</div>
));