diff --git a/react-redux-master/src/actions/index.js b/react-redux-master/src/actions/index.js
index 14420cb6c6..735ad00a70 100644
--- a/react-redux-master/src/actions/index.js
+++ b/react-redux-master/src/actions/index.js
@@ -1 +1,9 @@
//actions
+const increment = (val) => {
+ return {
+ type : 'INCREMENT',
+ inc : val
+ }
+}
+
+export default increment;
diff --git a/react-redux-master/src/components/DivPanel.js b/react-redux-master/src/components/DivPanel.js
index 8b13789179..253611c632 100644
--- a/react-redux-master/src/components/DivPanel.js
+++ b/react-redux-master/src/components/DivPanel.js
@@ -1 +1,13 @@
+import React from 'react'
+import { useSelector } from 'react-redux';
+const DivPanel = () =>{
+ let counterVal = useSelector(state => state.counter)
+ return (
+
+ The present value of counter is {counterVal}
+
+ );
+}
+
+export default DivPanel;
diff --git a/react-redux-master/src/components/MainPanel.js b/react-redux-master/src/components/MainPanel.js
index 8b13789179..dff43de7ff 100644
--- a/react-redux-master/src/components/MainPanel.js
+++ b/react-redux-master/src/components/MainPanel.js
@@ -1 +1,13 @@
+import React from 'react'
+import MyButton from './MyButton'
+import DivPanel from './DivPanel';
+const MainPanel = ()=>{
+ return (
+
+ );
+}
+export default MainPanel;
diff --git a/react-redux-master/src/components/MyButton.js b/react-redux-master/src/components/MyButton.js
index 8b13789179..69fa68945b 100644
--- a/react-redux-master/src/components/MyButton.js
+++ b/react-redux-master/src/components/MyButton.js
@@ -1 +1,12 @@
+import React from 'react'
+import { useDispatch} from 'react-redux';
+import increment from '../actions'
+const MyButton = ()=>{
+ let dispatch = useDispatch();
+ return (
+
+ );
+}
+
+export default MyButton;
diff --git a/react-redux-master/src/index.js b/react-redux-master/src/index.js
index 204055290e..68af812a47 100644
--- a/react-redux-master/src/index.js
+++ b/react-redux-master/src/index.js
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
-// import * as serviceWorker from './serviceWorker';
-
-import {createStore} from 'redux';
import {Provider} from 'react-redux'
import myReducers from './reducers'
-
+import {legacy_createStore as createStore} from 'redux';;
//Create the store
const myStore = createStore(myReducers);
@@ -17,8 +14,3 @@ myStore.subscribe(()=>console.log(myStore.getState()));
//Enveloping the App inside the Provider, ensures that the states in the store are available
//throughout the application
ReactDOM.render(, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-// serviceWorker.unregister();
diff --git a/react-redux-master/src/reducers/index.js b/react-redux-master/src/reducers/index.js
index f30c2c56b8..de79eefab6 100644
--- a/react-redux-master/src/reducers/index.js
+++ b/react-redux-master/src/reducers/index.js
@@ -1 +1,15 @@
//reducers
+import {combineReducers} from 'redux'
+
+const counter = (state=0,action)=>{
+ if(action.type === 'INCREMENT') {
+ //This will increase the value of counter by the value passed to the increment method
+ return state+action.inc;
+ }
+ //Returns the current value of the counter
+ return state;
+}
+
+const myReducers = combineReducers({counter});
+
+export default myReducers;
diff --git a/todo_list/src/App.js b/todo_list/src/App.js
index 220a997d1c..76ed97e434 100644
--- a/todo_list/src/App.js
+++ b/todo_list/src/App.js
@@ -1,28 +1,118 @@
-import React, {useState} from "react";
+import React, {useState,useEffect} from "react";
import "./App.css";
const App = () => {
- const [todos, setTodos] = useState([]);
+ const [todos, setTodos] = useState([])
+ const [todoEditing, setTodoEditing] = useState(null);
+
+ useEffect(() => {
+ const json = localStorage.getItem("todos");
+ const loadedTodos = JSON.parse(json);
+ if (loadedTodos) {
+ setTodos(loadedTodos);
+ }
+ }, []);
+
+useEffect(() => {
+ if(todos.length > 0) {
+ const json = JSON.stringify(todos);
+ localStorage.setItem("todos", json);
+ }
+ }, [todos]);
// Add the handlesubmit code here
-
+ function handleSubmit(e) {
+ e.preventDefault();
+
+ let todo = document.getElementById('todoAdd').value
+ const newTodo = {
+ id: new Date().getTime(),
+ text: todo.trim(),
+ completed: false,
+ };
+ if (newTodo.text.length > 0 ) {
+ setTodos([...todos].concat(newTodo));
+ } else {
+
+ alert("Enter Valid Task");
+ }
+ document.getElementById('todoAdd').value = ""
+ }
// Add the deleteToDo code here
-
+ function deleteTodo(id) {
+ let updatedTodos = [...todos].filter((todo) => todo.id !== id);
+ setTodos(updatedTodos);
+ }
// Add the toggleComplete code here
-
+ function toggleComplete(id) {
+ let updatedTodos = [...todos].map((todo) => {
+ if (todo.id === id) {
+ todo.completed = !todo.completed;
+ }
+ return todo;
+ });
+ setTodos(updatedTodos);
+ }
// Add the submitEdits code here
-
+ function submitEdits(newtodo) {
+ const updatedTodos = [...todos].map((todo) => {
+ if (todo.id === newtodo.id) {
+ todo.text = document.getElementById(newtodo.id).value;
+ }
+ return todo;
+ });
+ setTodos(updatedTodos);
+ setTodoEditing(null);
+ }
return(
-
-
Todo List
-
-
+
+
Todo List
+
+ {todos.map((todo) => (
+
+
+
+
+ {/* if it is edit mode, allow submit edit, else allow edit */}
+ {todo.id === todoEditing ?
+ (
+
+ ) :
+ (
+
+ )}
+
+
+
+
+ ))}
+
);
};
export default App;