React Advanced

0% completed

Previous
Next
Code Challenge

Challenge 1: Counter with Redux

Follow the instructions below to complete the challenge:

  1. Set Up Redux Store:
  • Create a Redux store using configureStore from @reduxjs/toolkit.
  • Define a reducer to manage a count state with increment and decrement actions.
  1. Create Counter Component:
  • Create a Counter component that displays the current count.
  • Add "+" and "-" buttons to increment and decrement the count.
  1. Connect Counter to Redux Store:
  • Use useSelector to get the count value from the store.
  • Use useDispatch to update the count when buttons are clicked.
  1. Render the Counter in App Component:
  • Wrap the app in a <Provider> and render the Counter component.

Challenge 2: Todo List with Redux

Follow the instructions below to complete the challenge:

  1. Set Up Redux Store:
  • Create a Redux store with an initial todos array in the state.
  • Define reducers for adding and removing todos.
  1. Create Todo Component:
  • Implement an input field and button to add new todos.
  • Display the list of todos using useSelector.
  1. Connect Todo List to Redux Store:
  • Use useDispatch to add new todos to the store.
  • Allow users to remove a todo by clicking a delete button.
  1. Render Todo List in App Component:
  • Wrap the app in a <Provider> and render the TodoList component.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next