redux-examples-001.js

import React from 'react'

// Example 1: translation

const TranslationContext = {
  // most likely, from Provider or any other top-level component
  locale: 'en',
  strings: {
    en: {
      'user.my_account': 'My account'
    }
  },
  translate: string => this.strings[this.locale][string] || string
}

const withTranslation = component => {
  return function TranslatedComponent(props) {
    const localizedProps = props.map(prop => TranslationContext.translate(prop))
    return component(localizedProps)
  }
}

const Label = ({ text }) => <div>{text}</div>

export default withTranslation(Label)({ text: 'user.my_account' })

// Example 2:

const ProvierContext = {
  store: {
    user: {
      pricingPlanId: 3
    },
    profile: {
      firstName: 'Dima',
      lastName: 'Batrakov',
      avatarUrl: 'https://example.com/dima.png'
    }
  }
}

const connect = (
  mapStateToProps = state => ({}),
  mapDispatchToProps = null
) => {
  return function connectHOC(component) {
    return function ConnectedComponent(ownProps) {
      const stateProps = mapStateToProps(ProvierContext.store)

      return component({ ...stateProps, ...ownProps })
    }
  }
}

const Profile = ({ fullName, mainColor }) => (
  <div style={`background: ${mainColor}`}>{fullName}</div>
)

connect(state => ({
  fullName: `${state.user.firstName} ${state.user.lastName}`
}))(Profile)