Improved App Structure. Added Redux connected store in App.

CHANGELOG.md

@@ -1,6 +1,10 @@
 ## Webpack4 - React16.7 Templater App
 
 
+# 1.1.0
+ * Improved App Structure.
+ * Added Redux connected store in App.
+
 # 1.0.0
  * First stabel release!
  * Added tslint ans eslint inside compilation babel processes builds.

src/components/Body.js

@@ -1,15 +1,46 @@
 import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import styles from '../styles/index.scss';
+import buttonsStyles from '../styles/button.scss';
+
+const FIRST_IMAGE_ID = 1;
+const SECOND_IMAGE_ID = 2;
 
 class Body extends PureComponent {
+  static defaultProps = {
+    imageToShow: 3,
+    switchImage: () => {}
+  }
+
+  static propTypes = {
+    imageToShow: PropTypes.number,
+    switchImage: PropTypes.func
+  }
+
+  _handleClick = () => {
+    const { imageToShow, switchImage } = this.props;
+
+    if (imageToShow === FIRST_IMAGE_ID) {
+      return switchImage(SECOND_IMAGE_ID);
+    }
+
+    return switchImage(FIRST_IMAGE_ID);
+  }
+
+  _getImage = () => {
+    const { imageToShow } = this.props;
+
+    return imageToShow;
+  }
+
   render() {
+    const imageToShow = this._getImage();
+
     return (
       <div className={styles.body}>
-        <img
-          className={styles.bodyImg}
-          src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png'
-          alt='main_img'
-        />
+        <button type='button' onClick={this._handleClick} className={buttonsStyles.button}>
+          <img className={styles.bodyImg} src={`../assets/${imageToShow}.png`} alt='main_img' />
+        </button>
       </div>
     );
   }

src/components/index.js

@@ -1,5 +1,5 @@
 import Header from './Header';
-import Footer from './Footer';
 import Body from './Body';
+import Footer from './Footer';
 
-export { Header, Footer, Body };
+export { Header, Body, Footer };

src/constants/index.js

@@ -1,4 +1,4 @@
-export const COUNT_ADD = 'COUNT_ADD';
+export const SWITCH_IMAGE = 'SWITCH_IMAGE';
 // consts for Saga asyc actions, probably you do not need this below
 export const SOME_SAGA = 'SOME_SAGA';
 export const SOME_ASYNC_ACTION = 'SOME_ASYNC_ACTION';

src/container/index.js → src/containers/AppContainer.js

@@ -1,21 +1,15 @@
 import { PropTypes } from 'prop-types';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Route } from 'react-router-dom';
 import { ConnectedRouter } from 'connected-react-router';
 
-import { Header, Footer, Body } from '../components';
-import styles from '../styles/index.scss';
+import CoreLayout from '../layout';
 
 const AppContainer = ({ store, history }) => {
   return (
-    <Provider store={store} history={history}>
+    <Provider store={store}>
       <ConnectedRouter history={history}>
-        <div className={styles.appWrapper}>
-          <Header />
-          <Route exact path='/' component={Body} />
-          <Footer />
-        </div>
+        <CoreLayout />
       </ConnectedRouter>
     </Provider>
   );

src/containers/Wrappers/Body.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import { Body } from '../../components';
+import { switchImage } from '../../modules/actions';
+
+const mapStateToProps = state => ({
+  imageToShow: state.app.imageToShow
+});
+
+const mapDispatchToProps = dispatch => ({
+  switchImage: imageID => dispatch(switchImage(imageID))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Body);

src/containers/Wrappers/index.js

@@ -0,0 +1,3 @@
+import Body from './Body';
+
+export { Body };

src/controller/initialState.js

@@ -1,6 +1,7 @@
 const initialState = {
   app: {
-    appName: 'reactStarterKit'
+    appName: 'CoConatBuider',
+    imageToShow: 1
   }
 };
 

src/controller/middleware/reduxLogger.js

@@ -1,3 +1,4 @@
+// Console logger for Redux Action dispatch fires
 import { createLogger } from 'redux-logger';
 
 const logger = createLogger({

src/controller/middleware/rootReducer.js

@@ -1,3 +1,5 @@
+// root Redux reducers for Splite-Chunks mode,
+// probably you would always need this
 import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';
 import app from '../../modules/reducers';

src/controller/store.js

@@ -6,7 +6,17 @@ import history from './history';
 import { logger, makeRootReducer, sagaMiddleware as saga, rootSaga, runSaga } from './middleware';
 
 const rootStore = () => {
-  const middleware = [routerMiddleware(history), saga, logger];
+  const middleware = [];
+
+  // Adding app routing
+  middleware.push(routerMiddleware(history));
+
+  // Adding async Saga actions environment
+  middleware.push(saga);
+
+  // Adding console logger for Redux
+  middleware.push(logger);
+
   const enhancers = [];
 
   if (__DEV__ && window.__REDUX_DEVTOOLS_EXTENSION__) {

src/index.js

@@ -4,7 +4,7 @@ import RedBox from 'redbox-react';
 
 import store from './controller/store';
 import history from './controller/history';
-import AppContainer from './container/index';
+import AppContainer from './containers/AppContainer';
 
 const ENTRY_POINT = document.querySelector('#react-app-root');
 
@@ -25,7 +25,7 @@ if (__DEV__) {
   // ========================================================
   const devRender = () => {
     if (module.hot) {
-      module.hot.accept('./container/index', () => render());
+      module.hot.accept('./containers/AppContainer', () => render());
     }
 
     render();

src/layout/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Route, withRouter } from 'react-router-dom';
+
+import { Header, Footer } from '../components';
+
+import { Body } from '../containers/Wrappers';
+import styles from '../styles/index.scss';
+
+const CoreLayout = () => {
+  return (
+    <div className={styles.appWrapper}>
+      <Header />
+      <Route exact path='/' component={Body} />
+      <Footer />
+    </div>
+  );
+};
+
+export default withRouter(CoreLayout);

src/modules/actions.js

@@ -1,13 +1,13 @@
-import { COUNT_ADD, SOME_ASYNC_ACTION } from '../constants';
+import { SWITCH_IMAGE, SOME_ASYNC_ACTION } from '../constants';
 
-const addCount = count => ({
-  type: COUNT_ADD,
-  count
+const switchImage = imageID => ({
+  type: SWITCH_IMAGE,
+  imageID
 });
 
 const someAsyncAction = payload => ({
   type: SOME_ASYNC_ACTION,
   payload
 });
 
-export { addCount, someAsyncAction };
+export { switchImage, someAsyncAction };

src/modules/reducers.js

@@ -1,15 +1,14 @@
 import { LOCATION_CHANGE } from 'connected-react-router';
-import { COUNT_ADD, SOME_ASYNC_ACTION } from '../constants';
+import { SWITCH_IMAGE, SOME_ASYNC_ACTION } from '../constants';
 import initialState from '../controller/initialState';
 
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [COUNT_ADD]: (state, action) => ({
+  [SWITCH_IMAGE]: (state, action) => ({
     ...state,
-    count: action.count,
-    countDoubl: action.count % 2 === 0 ? action.count : state.countDoubl
+    imageToShow: action.imageID
   }),
   [SOME_ASYNC_ACTION]: (state, action) => ({
     ...state,

src/modules/saga/someSaga.js

@@ -5,10 +5,12 @@ export function* someSaga() {
   try {
     const payload = yield fetch('https://www.github.com');
 
-    // some payload from the responce recived
+    // throw an error if no payload received
     if (!payload) {
       throw new Error('Error in payload!');
     }
+
+    // some payload from the responce received
     yield put(someAsyncAction(payload));
   } catch (error) {
     throw new Error('Some error in sagas occured!');

src/styles/button.scss

@@ -0,0 +1,8 @@
+.button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+}

tsconfig.json

@@ -10,7 +10,9 @@
     "target": "es5",
     "jsx": "react",
     "moduleResolution": "node",
-    "lib": ["es6", "dom"]
+    "lib": ["es6", "dom"],
+    "outDir": "./dist",
+    "rootDir": "./src"
   },
   "typeAcquisition": {
     "enable": true