20170921.md

ReactJS

Useful links

• All about React Router 4;
• react-redux "connect" explained;
• react-i18next Translating High Order Components;

Tips

Create a Route for your module that connects to the redux store

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'

class ModuleRoute extends React.Component {
  componentWillMount () {
    const { dispatchBeforeMount } = this.props

    // this function is injected in the component using connect
    dispatchBeforeMount()
  }

  render () {
    // model comes from the store
    const { component: Component, model, ...rest } = this.props

    return (
      <Route {...rest} render={() => {
          return <Component {...this.props} />
      }} />
    )
  }
}

const stateToProps = ({moduleReducer}) => ({
  model: moduleReducer.model
})

const dispatchToProps = dispatch => {
  return {
    logout: () => {
      dispatch({type: 'DESTROY_SOMETHING'})
    },
    dispatchBeforeMount: () => {
      dispatch({type: 'GET_SOMETHING'})
    }
  }
}

export default connect(stateToProps, dispatchToProps)(ModuleRoute)