text: import { connect } from 'react-redux'
  import { updateSecretKey, login, inputFocus } from '../modules/login'
  
  /*  This is a container component. Notice it does not contain any JSX,
      nor does it import React. This component is **only** responsible for
      wiring in the actions and state necessary to render a presentational
      component - in this case, the LogIn:   */
  
  import LogIn from '../components/LogIn'
  
  /*  Object of action creators (can also be function that returns object).
      Keys will be passed as props to presentational components. Here we are
      implementing our wrapper around increment; the component doesn't care   */
  
  const mapDispatchToProps = {
    handleChange: (e) => updateSecretKey(e.target.value),
    onFocus: inputFocus.bind(null, true),
    onBlur: inputFocus.bind(null, false),
    login
  }
  
  const mapStateToProps = (state) => ({
    type: "text",
    focus: state.loginfo.focus,
    valid: state.loginfo.success,
    value: state.loginfo.key
  })
  
  /*  Note: mapStateToProps is where you should use `reselect` to create selectors, ie:
  
      import { createSelector } from 'reselect'
      const secretKey = (state) => state.secretKey
      const tripleCount = createSelector(login, (count) => count * 3)
      const mapStateToProps = (state) => ({
        login: tripleCount(state)
      })
  
      Selectors can compute derived data, allowing Redux to store the minimal possible state.
      Selectors are efficient. A selector is not recomputed unless one of its arguments change.
      Selectors are composable. They can be used as input to other selectors.
      https://github.com/reactjs/reselect    */
  
  export default connect(mapStateToProps, mapDispatchToProps)(LogIn)
  