connect to Redux store

configs/webpack/dev.js

@@ -1,21 +1,22 @@
 // development config
-const merge = require('webpack-merge');
-const webpack = require('webpack');
-const commonConfig = require('./common');
+const merge = require("webpack-merge");
+const webpack = require("webpack");
+const commonConfig = require("./common");
 
 module.exports = merge(commonConfig, {
-  mode: 'development',
+  mode: "development",
   entry: [
-    'react-hot-loader/patch', // activate HMR for React
-    'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
-    'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
-    './index.jsx', // the entry point of our app
+    "react-hot-loader/patch", // activate HMR for React
+    "webpack-dev-server/client?http://localhost:8080", // bundle the client for webpack-dev-server and connect to the provided endpoint
+    "webpack/hot/only-dev-server", // bundle the client for hot reloading, only- means to only hot reload for successful updates
+    "./index.jsx", // the entry point of our app
   ],
   devServer: {
     hot: true, // enable HMR on the server
-    openPage: 'http://localhost:8080'
+    openPage: "http://localhost:8080",
+    historyApiFallback: true
   },
-  devtool: 'cheap-module-eval-source-map',
+  devtool: "cheap-module-eval-source-map",
   plugins: [
     new webpack.HotModuleReplacementPlugin(), // enable HMR globally
     new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates

package.json

@@ -65,6 +65,7 @@
         "postcss-loader": "^2.1.5",
         "react-addons-test-utils": "^15.6.2",
         "react-hot-loader": "^4.3.3",
+        "redux-immutable-state-invariant": "^2.1.0",
         "style-loader": "^0.21.0",
         "url-loader": "^1.0.1",
         "webpack": "^4.12.2",
@@ -81,21 +82,22 @@
         "ajv": "6.5.1",
         "chartist": "0.11.0",
         "classnames": "2.2.6",
+        "linq": "^3.1.0",
         "perfect-scrollbar": "1.4.0",
         "react": "^16.4.1",
         "react-chartist": "0.13.1",
         "react-dom": "^16.4.1",
         "react-google-maps": "^9.4.5",
-        "react-router-dom": "4.3.1",
-        "react-swipeable-views": "0.12.14",
         "react-redux": "5.0.7",
+        "react-router-dom": "4.3.1",
         "react-router-redux": "^4.0.8",
+        "react-swipeable-views": "0.12.14",
         "redux": "4.0.0",
         "redux-thunk": "2.3.0",
         "redux-toolbelt": "2.1.5",
+        "redux-toolbelt-thunk": "^2.0.3",
         "toastr": "2.1.4",
-        "url-join": "4.0.0",
-        "linq": "^3.1.0"
+        "url-join": "4.0.0"
     },
     "postcss": {}
 }

src/_dummy_data/general.jsx

@@ -3,19 +3,19 @@
 // #############################
 
 const bugs = [
-  'Sign contract for "What are conference organizers afraid of?"',
+  "Sign contract for \"What are conference organizers afraid of?\"",
   "Lines From Great Russian Literature? Or E-mails From My Boss?",
   "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
   "Create 4 Invisible User Experiences you Never Knew About"
 ];
 const website = [
   "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
-  'Sign contract for "What are conference organizers afraid of?"'
+  "Sign contract for \"What are conference organizers afraid of?\""
 ];
 const server = [
   "Lines From Great Russian Literature? Or E-mails From My Boss?",
   "Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit",
-  'Sign contract for "What are conference organizers afraid of?"'
+  "Sign contract for \"What are conference organizers afraid of?\""
 ];
 
 export default {

src/api/chartApi.js

@@ -1,8 +1,8 @@
-import charts from '../_dummy_data/charts';
-import se from "../_dummy_data//simulator";
+import charts from "../_dummy_data/charts";
+import simulator from "../_dummy_data//simulator";
 
 //Calling Api and return data
 //This will use timeout to simulate server call.
 export function getChartData() {
-  return se(charts);
+  return simulator(charts);
 }

src/api/generalApi.js

@@ -1,8 +1,8 @@
-import general from '../_dummy_data/general';
-import se from "../_dummy_data//simulator";
+import general from "../_dummy_data/general";
+import simulator from "../_dummy_data//simulator";
 
 //Calling Api and return data
 //This will use timeout to simulate server call.
 export function getGeneral() {
-  return se(general);
+  return simulator(general);
 }

src/api/index.js

@@ -1,7 +1,7 @@
-import GeneralApi from './generalApi';
-import ChartApi from './chartApi';
+import * as GeneralApi from "./generalApi";
+import * as ChartApi from "./chartApi";
 
 export default {
   GeneralApi,
   ChartApi
-}
+};

src/index.jsx

@@ -1,27 +1,31 @@
 import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
 import { createBrowserHistory } from "history";
 import { Router, Route, Switch } from "react-router-dom";
+import { Provider } from 'react-redux';
 // import { AppContainer } from "react-hot-loader";
 // import App from "./layouts/Dashboard/Dashboard";
-
 //Style-sheets
-import './assets/less/App.less';
+import "./assets/less/App.less";
 import "./assets/css/material-dashboard-react.css?v=1.3.0";
 
 import indexRoutes from "routes/index.jsx";
+import storeCreator from "./store";
+import initialState from "./reducers/initialState";
 
 const hist = createBrowserHistory();
+const store = storeCreator(initialState);
 
 const renderComponent = () => {
-    ReactDOM.render(
+    ReactDOM.render(<Provider store={store}>
         <Router history={hist}>
             <Switch>
                 {indexRoutes.map((prop, key) => {
                     return <Route path={prop.path} component={prop.component} key={key} />;
                 })}
             </Switch>
-        </Router>,
+        </Router>
+    </Provider>,
         document.getElementById("root")
     );
 };

src/reducers/index.js

@@ -2,8 +2,11 @@ import {
   combineReducers
 } from "redux";
 
-const rootReducer = combineReducers({
+import dashBoardReducers from "../views/Dashboard/Reducer";
 
+const rootReducer = combineReducers({
+  charts: dashBoardReducers.chartsReducer,
+  general: dashBoardReducers.generalReducer,
 });
 
 export default rootReducer;

src/reducers/initialStore.js → src/reducers/initialState.js

@@ -1,4 +1,4 @@
 export default {
   charts: {},
   general: {}
-}
+};

src/store/dev.js

@@ -1,10 +1,10 @@
 import {
   createStore,
   applyMiddleware
-} from 'redux';
-import rootReducer from '../reducers';
-import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
-import thunk from 'redux-thunk';
+} from "redux";
+import rootReducer from "../reducers";
+import reduxImmutableStateInvariant from "redux-immutable-state-invariant";
+import thunk from "redux-thunk";
 
 export default function configureStore(initialState) {
   return createStore(

src/views/Dashboard/Actions.js

@@ -0,0 +1,12 @@
+import {
+  makeThunkAsyncActionCreator
+} from "redux-toolbelt-thunk";
+import Api from "../../api";
+
+const getGeneral = makeThunkAsyncActionCreator("FETCH_USER", Api.GeneralApi.getGeneral);
+const getChartData = makeThunkAsyncActionCreator("FETCH_USER", Api.ChartApi.getChartData);
+
+export default {
+  getGeneral,
+  getChartData
+}