Merge pull request #11 from kingisaac95/add-redux

Author: kingisaac95

package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-jest": "^23.4.2",
-    "babel-loader": "^7.1.5",
+    "babel-loader": "^8.0.6",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -36,8 +36,14 @@
     "webpack-dev-server": "^3.1.5"
   },
   "dependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
     "react": "^16.4.2",
-    "react-dom": "^16.4.2"
+    "react-dom": "^16.4.2",
+    "react-redux": "^7.1.0",
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0"
   },
   "babel": {
     "presets": [

src/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

src/app/components/Header.js

@@ -6,6 +6,7 @@ const Header = () => (
       <h1 className="animate-top">React and Webpack :)</h1>
       <hr className="gray-border" />
       <p>Hello world!</p>
+      <p>Hurray!!! We now have Redux setup added to our configuration 🎉🎉🎉</p>
     </div>
   </div>
 );

src/app/containers/sample.containers.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import { sampleAction } from '../store/actions/sample.actions';
+// import your actual component here
+const SampleComponent = () => {};
+
+const mapStateToProps = (state, ownProps) => {
+  return {};
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    testSampleAction: dispatch(sampleAction())
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleComponent);

src/app/store/actions/sample.actions.js

@@ -0,0 +1,18 @@
+// export all action types relating to this file in any case it's needed in other files
+export const SAMPLE_ACTION = 'SAMPLE_ACTION';
+export const SAMPLE_ACTION_WITH_PAYLOAD = 'SAMPLE_ACTION_WITH_PAYLOAD';
+
+export const sampleAction = () => dispatch => {
+  dispatch({
+    type: SAMPLE_ACTION,
+  });
+};
+
+export const sampleActionWithPayload = () => dispatch => {
+  const payload = {};
+
+  dispatch({
+    type: SAMPLE_ACTION_WITH_PAYLOAD,
+    payload,
+  });
+};

src/app/store/configure-store.js

@@ -0,0 +1,9 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from './reducer';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+export default () => createStore(
+  rootReducer,
+  composeEnhancers(applyMiddleware(thunk)),
+);

src/app/store/reducer.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import sampleReducer from './reducers/sample.reducers';
+
+export default combineReducers({
+  sampleReducer,
+});

src/app/store/reducers/sample.reducers.js

@@ -0,0 +1,21 @@
+import * as Actions from '../actions/sample.actions';
+
+const initialState = {
+  hasInitialState: true,
+};
+
+const sample = (state = initialState, action) => {
+  switch (action.type) {
+    case Actions.SAMPLE_ACTION:
+      return { nothing: null };
+    case Actions.SAMPLE_ACTION_WITH_PAYLOAD:
+      return {
+        ...state,
+        dataFromWherever: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export default sample;

src/index.js

@@ -1,9 +1,12 @@
 import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import configureStore from './app/store/configure-store';
 import App from './app/App';
 import './index.scss';
 
-export const Root = () => <App />;
+export const Root = () => <Provider store={configureStore()}><App /></Provider>;
 
 ReactDOM.render(<Root />, document.getElementById('root'));