Compilation and refactor of https://github.com/vaibhavmule/react-redux-helloworld

redux-helloworld-compilation.jsx

/*
 * master index (App wrapper)
 */

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import allReducers from './reducers'
import registerServiceWorker from './registerServiceWorker';

let store = createStore(allReducers) // this is store

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
    document.getElementById('root')
);
registerServiceWorker();


/*
 * App
 */

import React, { Component } from 'react';
import HelloWorldContainer from './containers/HelloWorldContainer'

class App extends Component {
  render() {
    return (
      <HelloWorldContainer />
    );
  }
}

export default App;


/*
 *  actions
 */

export const SAY_HELLO = 'SAY_HELLO'
export const SAY_GOODBYE = 'SAY_GOODBYE'
export const RESET_MESSAGE = 'RESET_MESSAGE'

export const sayHello = () => {
  return {
    type: SAY_HELLO,
    message: 'Hello, World!'
  }
}

export const sayGoodBye = () => {
  type: SAY_GOODBYE,
  message: 'Goodbye!'
}

export const resetMessage = () => {
  return {
    type: RESET_MESSAGE
  }
}

/*
 * reducers
 */

import { combineReducers } from 'redux'
import { SAY_HELLO, SAY_GOODBYE, RESET_MESSAGE } from './../actions'

let initialState = { message: 'Um...' }

const helloWorldReducer = (state=initialState, action) => {
  switch (action.type) {
    case SAY_HELLO:
      state.message = action.message
      return state
    case SAY_GOODBYE:
      state.message = action.message
      return state
    case RESET_MESSAGE:
        // resetting message to message of Initial State
        state.message = initialState.message
        return state
    default:
      return state
  }
}

const allReducers = combineReducers({
  helloWorldReducer // "helloWorldReducer": helloWorldReducer
})

export default allReducers


/*
 * HelloWorld: CONTAINER
 */

import { connect } from 'react-redux'
import { sayHello, sayGoodbye, resetMessage } from './../actions'
import HelloWorld from './../components/HelloWorld'

const mapReduxStateToProps = (reduxStoreState, ownProps) => {
  return {
    message: reduxStoreState.helloWorldReducer.message
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClickHello: () => dispatch(sayHello()),
    onClickGoodbye: () => dispatch(sayGoodbye()),
    reset: () => dispatch(resetMessage())
  }
}

const HelloWorldContainer = connect(
  mapReduxStateToProps,
  mapDispatchToProps
)(HelloWorld)

export default HelloWorldContainer


/*
 * HelloWorld: PRESENTATIONAL
 */

import React from 'react';
import PropTypes from 'prop-types';

const HelloWorld = ({ onClickHello, onClickGoodbye, reset, message }) => {
  return (
    <div>
      <h1>{ message }</h1>
      <button onClick={onClickHello}>Say Hello</button>
      <button onClick={onClickGoodbye}>Say Goodbye</button>
      &nbsp;
      <button onClick={reset}>Reset</button>
    </div>
  )
}


HelloWorld.propTypes = {
  onClickHello: PropTypes.func.isRequired,
  onClickGoodbye: PropTypes.func.isRequired,
  reset: PropTypes.func.isRequired,
  message: PropTypes.string.isRequired
}

export default HelloWorld