integration with redux

package.json

@@ -37,6 +37,8 @@
   "dependencies": {
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
-    "react-router-dom": "^4.3.1"
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.3.1",
+    "redux": "^4.0.0"
   }
 }

src/Actions/index.js

@@ -0,0 +1,4 @@
+export const textChange = text => ({
+  type: 'TEXT_CHANGE',
+  text
+})

src/App.scss

@@ -1,8 +1,4 @@
 body {
   font-size: 13px;
-
-  div {
-    margin: auto;
-    padding: 20px;
-  }
+  padding: 2rem;
 }

src/Pages/Home.js

@@ -1,13 +1,42 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { textChange } from '../Actions';
 
 class Home extends Component {
   render() {
+    let input
     return (
-      <h2>
-        Home Page
-      </h2>
+      <div>
+        <h2>
+          Home Page
+        </h2>
+        <div>Write a name and check it in SomePage Link</div>
+        <input
+          type="text"
+          onChange={e =>
+            {
+              this.props.updateText(input.value)
+            }
+          }
+          ref={node => {
+            input = node
+          }}
+        />
+        <div>
+          You typed: {this.props.text}
+        </div>
+      </div>
     );
   }
 }
 
-export default Home;
+const mapStateToText = state => ({
+    text: state.appReducer.text,
+});
+
+const mapDispatch = dispatch => ({
+  updateText: text => dispatch(textChange(text))
+});
+
+
+export default connect(mapStateToText, mapDispatch)(Home);

src/Reducers/index.js

@@ -0,0 +1,19 @@
+import { combineReducers } from 'redux';
+
+// you can keep this reducer in another file and import it from there
+// I have kept it here for simplifying
+// I would recommend you to break the reducers and actions as well
+const appReducer = (state = {}, action) => {
+  switch (action.type) {
+    case 'TEXT_CHANGE':
+      return {
+        text: action.text
+      }
+    default:
+      return state
+  }
+}
+
+export default combineReducers({
+  appReducer
+});

src/index.js

@@ -1,14 +1,21 @@
 import React from 'react';
 import './App.scss'
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import rootReducer from './Reducers'
 import App from './App';
 import { HashRouter } from 'react-router-dom'
 
+const store = createStore(rootReducer)
+
 const render = () =>
   ReactDOM.render(
-    <HashRouter>
-      <App/>
-    </HashRouter>,
+    <Provider store={store}>
+      <HashRouter>
+        <App/>
+      </HashRouter>
+    </Provider>,
     document.getElementById('index'));
 
 render();