smashercosmo

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(analytics))
)

// later
function fetchUser(id) {
  return (dispatch, getState, analytics) => {
    analytics.track(...);
  }

smashercosmo

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({analytics, api}))
)

// later
function fetchUser(id) {
  return (dispatch, getState, {analytics, api}) => {
    api.fetchUser().then(user => {
      analytics.track(...);

smashercosmo

export function fetchUser(id) {
  return (dispatch, getState, {analytics, api}) => {
    return api.fetchUser().then(user => {
      analytics.track(...);
    })
  }
}

smashercosmo

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({analytics: () => window.analytics}))
)

// later
function fetchUser(id) {
  return (dispatch, getState, {analytics}}) => {
    analytics().track(...);
  }

smashercosmo

const injectMiddleware = (staticDeps, dynamicDeps) => ({ dispatch, getState }) => next => action => {
  const deps = {...staticDeps};
  Object.keys(dynamicDeps).forEach(key => {
    deps[key] = dynamicDeps[key]();
  });
  return next(typeof action === 'function'
      ? action({ ...deps, dispatch, getState })
      : action
    );
  }

smashercosmo

import React from 'react'
import { noop } from 'lodash'
import hoistStatics from 'hoist-non-react-statics'
import { getServerErrorMessage } from '../../lib/serverErrorUtils'
import PropTypes from "prop-types"

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

smashercosmo

import React, { AnchorHTMLAttributes } from 'react'
import { NavLink, NavLinkProps } from 'react-router-dom'

const Link: React.SFC<NavLinkProps | AnchorHTMLAttributes> = props => {
  if (props.to) {
    return <NavLink {...props} />
  }

  return <a {...props} />
}

smashercosmo

import React from 'react'
import { css, cx } from 'react-emotion'
import { NavLinkProps } from 'react-router-dom'

import NavLink from '../NavLink/NavLink'

const linkClassName = css`
  color: blue;
`

smashercosmo

import { NavLink as ReactRouterNavLink, NavLinkProps } from 'react-router-dom'
import Text from '../Text/Text'
const NavLink = Text.withComponent<NavLinkProps>(ReactRouterNavLink)
export default NavLink

smashercosmo

import styled from 'react-emotion'
import { bool } from 'prop-types'
import isPropValid from '@emotion/is-prop-valid'
import {
  fontSize,
  color,
  textAlign,
  fontWeight,
  hover,
  propTypes,