hof thunks: first decorator

hof-thunks-0-params-decorators.js

// my-app/api/thunk-utils.js

// Used to dispatch the thunk.
// Rather boring compared to the rest.
export function map(fn) {
  return (createThunk) => (params, meta) => fn(createThunk(params, meta));
}

// These params are enforced.
export function withParams(overrideParams) {
  return (createThunk) => (params, meta) => createThunk(
    { ...params, ...overrideParams },
    meta
  );
}

// These params are overridable.
export function defaultParams(params) {
  return (createThunk) => (overrideParams, meta) => createThunk(
    { ...params, ...overrideParams },
    meta
  );
}

hof-thunks-1-decorated-dispatch-prop.js

import { myEndpoint } from 'my-app/api/thunks';
import * as thunk from 'my-app/api/thunk-utils';
// ... other sundry imports.

export default compose(
  connect(
    null,
    (dispatch, ownProps) => ({
      getMyResource: compose(
        thunk.map(dispatch),
        thunk.withParams({
          name: ownProps.name,
          order: 'asc',
        })
      )(myEndpoint),
    })
  )
)(class MyResourceDisplay extends PureComponent {
  handleClick(event) {
    event.preventDefault();
    const { result, error } =
    await this.props.getMyResource({
      name: 'foo',
      order: 'asc',
    });
    if (error) {
      this.setState({
        status: 'error',
        lastError: error,
        // not clearing result.
      });
    }
    else {
      this.setState({
        status: 'success',
        hasReceivedBefore: true,
        lastError: null,
        result,
      });
    }
  }
  // ... other componenty stuff here.
});