imp useDispatch over useActions

src/components/TodoInput.js

@@ -1,24 +1,24 @@
 import React, { useState } from 'react';
 import uuid from 'uuid/v4';
 import { addTodo } from '../redux';
-import { useActions } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 const TodoInput = (props) => {
+  const dispatch = useDispatch();
   const [todo, setTodo] = useState('Value');
-  // Have to give a different name here to avoid a name issue, otherwise `addTodo` is undefined
-  const addTodoAction = useActions(addTodo);
 
   const onChange = (event) => {
     setTodo(event.target.value);
   };
+
   const onSubmit = (event) => {
     event.preventDefault();
     if (todo.trim() === '') return;
-    addTodoAction({
+    dispatch(addTodo({
       id: uuid(),
       name: todo,
       complete: false
-    });
+    }));
     setTodo('');
   };
 

src/components/TodoList.js

@@ -1,12 +1,11 @@
 import React from 'react';
 // import TodoItem from './TodoItem';
-import { useSelector, useActions } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { toggleTodo, deleteTodo } from '../redux';
 
 const TodoList = () => {
   const todos = useSelector((state) => state.todos);
-
-  const actions = useActions({toggleTodo, deleteTodo})
+  const dispatch = useDispatch()
 
   // const { toggleTodo, deleteTodo } = useActions({
   //   toggleTodo: (todoId) => toggleTodoComplete(todoId),
@@ -32,12 +31,12 @@ const TodoList = () => {
           <input
             type="checkbox"
             checked={todo.complete}
-            onChange={() => actions.toggleTodo(todo.id)}
+            onChange={() => dispatch(toggleTodo(todo.id))}
           />
           <span className={todo.complete ? 'complete' : null}>{todo.name}</span>
           <span
             className="delete-button"
-            onClick={() => actions.deleteTodo(todo.id)}
+            onClick={() => dispatch(deleteTodo(todo.id))}
           >
             X
           </span>