React Project Styleguide

actions_index.js

export * as testActions, { at as testConstants } from './testActions'

testActions.js

export const at = {
  MY_FIRST_ACTION: 'MY_FIRST_ACTION',
  MY_SECOND_ACTION: 'MY_SECOND_ACTION',
}

export const first = (item) => async (dispatch) => {
  dispatch({type: at.MY_FIRST_ACTION, payload: item})
  return item
}

export const second = (url) => async (dispatch) => {
  const result = await http.get(url)
  dispatch({type: at.MY_SECOND_ACTION, payload: result})
  return result
}

testContainer.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { createSelector } from 'reselect'

import { testActions } from '../actions'

const mapStateToProps = createSelector(
  (state) => state.app,
  (state) => state.ui.val1,
  (state) => state.ui.val2,
  (app, uiVal1, uiVal2) => ({
    xolo: app.xolo,
    yolo: uiVal1 + uiVal2,
  })
)

const mapDispatchToProps = (dispatch) => ({
  testActions: bindActionCreators(testActions, dispatch),
})

class TestContainer extends Component {
  
  // propTypes come before defaultProps!
  static propTypes = {}
  
  static defaultProps = {}
  
  state = {}
  
  doStuff = (stuff) => {
    this.setState({stuff})
  }
  
  doAction = () => {
    const {yolo} = this.props
    
    testActions.first(yolo)
  }
  
  render() {
    return (
      <div 
        onClick={this.doStuff} 
        onDblClick={this.doAction}
      />
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TestContainer)

testReducer.js

import { testConstants as c } from '../actions'

const initialState = {
  item: null,
  result: null,
}

export default (state = initialState, action) => {
  const {type, payload} = action
  
  switch (type) {
    case c.MY_FIRST_ACTION: {
      return {...state, item: payload} 
    }
    
    case c.MY_SECOND_ACTION: {
      return {...state, result: payload} 
    }
    
    default: {
      return state
    }
  }
}