Bookstore: Use Redux in React components. #3
Conversation
There was a problem hiding this comment.
STATUS: CHANGES REQUIRED ♻️ ♻️
Hi @NahnahAJ,
Good job so far!
✔️ Implementation action dispatches
✔️ Good documentation
However, there are some issues that you still need to work on to go to the next project but you are almost there!
Required Changes ♻️
Check the comments under the review.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear. And please, remember to tag me in your question so I can receive the notification.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
src/components/AddBook.js
Outdated
| const AddBook = () => { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const createdBook = () => { | ||
| // Take the inputs from the state and and add them to an object. | ||
| const title = document.getElementById('title'); | ||
| const author = document.getElementById('author'); | ||
|
|
||
| // Set the data inputs in the local React state (set title and author). | ||
| // generate a unique id | ||
| // dispatch a corresponding action | ||
| dispatch( | ||
| addBook({ id: Date.now(), title: title.value, author: author.value }), | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <form className="form-container"> | ||
| <input | ||
| id="title" | ||
| type="text" | ||
| className="input-text" | ||
| placeholder="Book title" | ||
| /> | ||
| <input | ||
| id="author" | ||
| type="text" | ||
| className="input-text" | ||
| placeholder="Book author" | ||
| /> | ||
| <button | ||
| type="submit" | ||
| className="input-submit" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| createdBook(); | ||
| }} | ||
| > | ||
| Add Book | ||
| </button> | ||
| </form> | ||
| ); | ||
| }; | ||
| export default AddBook; |
There was a problem hiding this comment.
- Kindly control the inputs here. The
titleandauthorstates should be updated by theonChangelistener. You can look at this article on how to build controlled components in React
There was a problem hiding this comment.
STATUS: APPROVED!!! 🎉 🎉 🎉 🍾 🍾 🍾
Hi @NahnahAJ,
Good job !!!
To Highlight! 👏 🟢
✔️ Good commit messages
✔️ Descriptive Readme file
Your project is complete! Great work on making the changes requested by the previous reviewer. There is nothing else to say other than... it's time to merge it 
Congratulations! 🎉 🎉 🎉 🍾 🍾 🍾
Optional suggestions
Check the comments under the review.
Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.
N/A
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear or you can get to me on slack using this handle @Mihndim.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
Project requirements
First of all - make sure that you keep the state immutable in reducers!
Secondly, change the default state in your books reducer from an empty array to an array with a few books. One of the goals is to display them in your React components.
Import Redux Provider and your store in the main component of your React app.
Connect your app to the Redux store.
Make sure that list of books displays books from the Redux store.
Use
useSelectorto consume the state.In your React component responsible for adding new books, add functionality for the "Add new" button click:
Import and use Redux
useDispatch.Set the data inputs in the local React state (set title and author )
Takes the inputs from the state and generates a unique id and add them to an object.
Once your new book object is ready to be submitted to the Redux store, dispatch a corresponding action.
In your React component responsible for removing books, add functionality for the "Remove" button click:
In your React component responsible for categories, add functionality for the "Check status" button click: