react-redux-hooks initial commit

Author: ayushkanoongo

src/App.js

@@ -1,27 +1,21 @@
 import React from 'react';
 import './App.css';
-import {connect} from 'react-redux'
 import TodosReduxContainer from './components/TodosReduxContainer';
-// import TodosContainer from './components/TodosContainer';
+import { useSelector } from 'react-redux';
 
 function App(props) {
+  const todos = useSelector(state => state.todos);
+  const inputValue = useSelector(state => state.inputValue);
   return (
     <div className="App">
       <div className="container">
         <div className="header">
           <h1>Todo List</h1>
         </div>
-        <TodosReduxContainer {...props}/>
+        <TodosReduxContainer {...props} todos={todos} inputValue={inputValue}/>
       </div>
     </div>
   );
 }
 
-const mapStateToProps = (state) => {
-  return {
-    todos: state.todos,
-    inputValue: state.inputValue
-  }
-}
-
-export default connect(mapStateToProps)(App);
+export default App;

src/components/TodosReduxContainer.jsx

@@ -1,30 +1,27 @@
-import {connect} from 'react-redux'
 import React, { useState } from "react";
 import { Spinner } from 'reactstrap';
-import { deleteToDo, updateTodo, addTodo, handleTextChange, removeText } from './actions/todoActions';
+import { useDispatch } from 'react-redux';
+import { deleteToDo, updateTodo, addTodo } from './actions/todoActions';
 
 
-const handleDelete = (props, id) => {
-    props.deleteToDo(id)
+const handleDelete = (props, id, dispatch) => {
+    dispatch(deleteToDo(id))
 }
 
-const handleUpdate = (e, id, props) => {
-    props.updateTodo(id, e.target.checked)
+const handleUpdate = (e, id, props, dispatch) => {
+    dispatch(updateTodo(id, e.target.checked))
 }   
 
-const createTodo = (e, inputValue, setinputValue, props) => {
+const createTodo = (e, inputValue, setinputValue, props, dispatch) => {
     if(e.key === 'Enter'){
-        props.addTodo(inputValue)
+        dispatch(addTodo(inputValue))
         setinputValue("")
     }
 }
 
-// const handleChange = (e, props) => {
-//     props.handleTextChange(e.target.value)
-// }
-
 const TodosReduxContainer = (props) => {
     const [inputValue, setinputValue] = useState("");
+    const dispatch = useDispatch();
     if(props && props.todos.length  === 0){
         return(
             <div style={{textAlign: 'center'}}>
@@ -40,10 +37,10 @@ const TodosReduxContainer = (props) => {
                     type="text" 
                     placeholder="Add a task" 
                     maxLength="50"
-                    onKeyPress={(e) => createTodo(e, inputValue, setinputValue, props)}
+                    onKeyPress={(e) => createTodo(e, inputValue, setinputValue, props, dispatch)}
                     value={inputValue || ''} 
                     // onChange={(e) => handleChange(e, props)}
-                    onChange={e => setinputValue(e.target.value)}  
+                    onChange={e => setinputValue(e.target.value)}
                     />
                 </div>   
                 <div className="listWrapper">
@@ -53,11 +50,11 @@ const TodosReduxContainer = (props) => {
                             <li className="task" todo={todo} key={todo.id}>
                                 <input className="taskCheckbox" type="checkbox" 
                                 checked={todo.done}
-                                onChange={(e) => handleUpdate(e, todo.id, props)}
+                                onChange={(e) => handleUpdate(e, todo.id, props, dispatch)}
                             />              
                                 <label className="taskLabel">{todo.title}</label>
                                 <span className="deleteTaskBtn"
-                                onClick={(e) => handleDelete(props, todo.id)}>
+                                onClick={(e) => handleDelete(props, todo.id, dispatch)}>
                                 x
                                 </span>
                             </li>
@@ -70,14 +67,4 @@ const TodosReduxContainer = (props) => {
     }
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        deleteToDo: (id) => {dispatch(deleteToDo(id))},
-        addTodo: (data) => {dispatch(addTodo(data))},
-        updateTodo: (id, checked) => {dispatch(updateTodo(id, checked))},
-        removeText: () => {dispatch(removeText())},
-        handleTextChange: (data) => {dispatch(handleTextChange(data))}
-    }
-}
-
-export default connect(null, mapDispatchToProps)(TodosReduxContainer)
+export default TodosReduxContainer