Week 11 assignment 1 purely class component

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"
   ]
-}
+}

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);

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;

src/components/redux/flipInfo.js

@@ -0,0 +1 @@
+export const TOGGLE = "TOGGLE";

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>
     );
   }
 }