React Redux Usage

src/components/BookList.js

@@ -1,17 +1,29 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import Books from './Books';
 
 const BookList = () => {
-  const books = useSelector((state) => state.books);
+  const books = [
+    {
+      id: 1,
+      title: 'The pursuits of happiness',
+      category: 'politics',
+      author: 'Frank Kaso',
+    },
+    {
+      id: 2,
+      title: 'Vampire Diaries',
+      category: 'Horror',
+      author: 'Nick KLaus',
+    },
+  ];
+
   return (
     <>
       {books.map((book) => (
         <Books
           key={book.id}
           id={book.id}
           title={book.title}
-          category={book.category}
           author={book.author}
         />
       ))}

src/components/Books.js

@@ -1,28 +1,19 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
-import { removeBook } from '../redux/books/books';
 
 import '../assets/book.css';
 
 const Books = (props) => {
-  const {
-    id, author, title, category,
-  } = props;
-  const dispatch = useDispatch();
-
-  const deleteHandler = () => {
-    dispatch(removeBook(id));
-  };
-
+  const { id, author, title } = props;
   return (
     <div className="book-container">
       <div key={id} className="book-row1">
-        <span>{category}</span>
+        <span>Action</span>
         <h2>{title}</h2>
         <p>{author}</p>
         <button type="button">Comments</button>
-        <button type="button" onClick={deleteHandler}>Remove</button>
+        <button type="button">Remove</button>
         <button type="button">Edit</button>
       </div>
 
@@ -45,7 +36,6 @@ Books.propTypes = {
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
   author: PropTypes.string.isRequired,
-  category: PropTypes.string.isRequired,
 };
 
 export default Books;

src/components/Category.js

@@ -1,17 +1,9 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
-import { checkStatus } from '../redux/categories/categories';
 
-const Category = () => {
-  const dispatch = useDispatch();
-  const checkStatusHandler = () => {
-    dispatch(checkStatus());
-  };
-  return (
-    <div>
-      <button type="button" onClick={checkStatusHandler}>Check Status</button>
-    </div>
-  );
-};
+const Category = () => (
+  <div>
+    <button type="button">Check Status</button>
+  </div>
+);
 
 export default Category;

src/components/FormList.js

@@ -1,30 +1,19 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
-import { addBook } from '../redux/books/books';
+
 import '../assets/Form.css';
 
 const FormList = () => {
-  const dispatch = useDispatch();
-
   const registerBook = (e) => {
     e.preventDefault();
-    const { title, author, category } = e.target.elements;
-    const newBook = {
-      title: title.value,
-      author: author.value,
-      category: category.value,
-    };
-
-    dispatch(addBook(newBook));
   };
 
   return (
     <div className="add-form">
       <h2>ADD NEW BOOK</h2>
       <form onSubmit={registerBook}>
-        <input className="title-input" id="title" type="text" placeholder="Book title" />
-        <input className="author-input" id="author" placeholder="Author" />
-        <input className="panel-bg" id="category" placeholder="Category" />
+        <input className="title-input" type="text" placeholder="Book title" />
+        <input className="author-input" placeholder="Author" />
+        <input className="panel-bg" placeholder="Category" />
         <button type="submit" className="add-book-btn">ADD BOOK</button>
       </form>
     </div>

src/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
-import store from './redux/configureStore';
+import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <Provider store={store}>
-        <App />
-      </Provider>
+      <App />
     </BrowserRouter>
   </React.StrictMode>,
 );
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/redux/books/books.js

@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 const ADD_BOOK = 'ADD_BOOK';
 const REMOVE_BOOK = 'REMOVE_BOOK';
 
@@ -12,24 +11,6 @@ const books = (state = [], action) => {
         id: state.length,
         title: action.payload.title,
         author: action.payload.author,
-=======
-import initialData from './initialData';
-
-const ADD_BOOK = 'bookstore/src/redux/books/ADD_BOOK';
-const REMOVE_BOOK = 'bookstore/src/redux/categories/REMOVE_BOOK';
-
-export const removeBook = (id) => ({ type: REMOVE_BOOK, payload: { id } });
-export const addBook = (book) => ({ type: ADD_BOOK, payload: book });
-
-const books = (state = initialData, action) => {
-  switch (action.type) {
-    case ADD_BOOK:
-      return [...state, {
-        id: Math.floor((Math.random() * 100) + 1),
-        title: action.payload.title,
-        author: action.payload.author,
-        category: action.payload.category,
->>>>>>> react-redux-usage
       }];
     case REMOVE_BOOK:
       return state.filter((book) => book.id !== action.payload.id);