diff --git a/package.json b/package.json
index 85afa46..284249b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,10 @@
   "dependencies": {
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-scripts": "2.1.3"
+    "react-redux": "8.0.2",
+    "react-script": "2.0.5",
+    "react-scripts": "2.1.3",
+    "redux": "4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -25,4 +28,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
old mode 100755
new mode 100644
index a11777c..2f6c268
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..e29a683
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,31 @@
+import React from "react";
+// import store from "./components/redux/flipAction";
+import { connect } from "react-redux";
+
+const mapStateToProps = (state) => {
+  console.log(state);
+  return {
+    currentState: state
+  };
+};
+const mapDispatchToProps = (dispatch) => {
+  return {
+    toggle: () => dispatch({ type: "TOGGLE" })
+  };
+};
+class App extends React.Component {
+  render() {
+    const lightedness = this.props.currentState ? "lit" : "dark";
+    return (
+      <div className={`room ${lightedness}`}>
+        the room is {lightedness}
+        <br />
+        <div>
+          <h1>{lightedness}</h1>
+        </div>
+        <button onClick={this.props.toggle}>flip</button>
+      </div>
+    );
+  }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/components/redux/flipAction.js b/src/components/redux/flipAction.js
new file mode 100644
index 0000000..fbdc73e
--- /dev/null
+++ b/src/components/redux/flipAction.js
@@ -0,0 +1,14 @@
+import { createStore } from "redux";
+import { TOGGLE } from "./flipInfo";
+let intialState = true;
+const reducerFun = (currentState = intialState, action) => {
+  switch (action.type) {
+    case TOGGLE:
+      return !currentState;
+    default:
+      return currentState;
+  }
+};
+
+const store = createStore(reducerFun);
+export default store;
diff --git a/src/components/redux/flipInfo.js b/src/components/redux/flipInfo.js
new file mode 100644
index 0000000..372b3e3
--- /dev/null
+++ b/src/components/redux/flipInfo.js
@@ -0,0 +1 @@
+export const TOGGLE = "TOGGLE";
diff --git a/src/index.js b/src/index.js
old mode 100755
new mode 100644
index 3b2d738..7de1a47
--- a/src/index.js
+++ b/src/index.js
@@ -1,26 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-
+import App from "./App";
+import { Provider } from "react-redux";
+import store from "./components/redux/flipAction";
 class Room extends React.Component {
-  state = {
-    isLightOn: true
-  };
-
-  flipLight = () => {
-    this.setState({
-      isLightOn: !this.state.isLightOn
-    });
-  };
-
   render() {
-    const lightedness = this.state.isLightOn ? "lit" : "dark";
     return (
-      <div className={`room ${lightedness}`}>
-        the room is {lightedness}
-        <br />
-        <button onClick={this.flipLight}>flip</button>
-      </div>
+      <Provider store={store}>
+        <App />
+      </Provider>
     );
   }
 }