Challenge: Connecting Redux with React
Step 4
Focus on involving Redux logic in a React app. Connect React components and the Redux store to enable state management and actions.
Example
Ship Tracker App
Challenge
Form.jsx:
- Open the
Form.jsx
file. - Import the
useDispatch
hook from thereact-redux
package. This hook will be used to dispatch actions to the Redux store. - Import the
addGoal
action from thegoalAction.js
file. This action is responsible for adding a goal to the Redux store. - Initialize the
dispatch
variable inside the component by calling theuseDispatch
hook. - Complete the
handleFormSubmit
function by dispatching theaddGoal
action. Use thedispatch
function and pass in an object with the goal details:{ id: Date.now(), text: goal }
. TheDate.now()
generates a unique ID for each goal. - Reset the form after submission by calling the
resetForm
function.
GoalList.jsx:
- Open the
GoalList.jsx
file. - Import the
useDispatch
anduseSelector
hooks from thereact-redux
package. These hooks will be used to access the Redux store and dispatch actions. - Import the
removeGoal
action from thegoalAction.js
file. This action is responsible for removing a goal from the Redux store. - Initialize the
goals
variable using theuseSelector
hook and access thegoals
state from the Redux store. - Initialize the
dispatch
variable by calling theuseDispatch
hook. - Complete the
handleRemoveGoal
function by dispatching theremoveGoal
action. Pass in thegoal
as a parameter. - Finish the logic of rendering the array of goals by mapping over the
goals
array and rendering each goal. - Display the text of each goal and add a button with an
onClick
event that calls thehandleRemoveGoal
function and passes in the respectivegoal
.
- Use theΒ
useDispatch
Β andΒuseSelector
Β hooks to access the Redux store and dispatch actions. - Work with theΒ
removeGoal
Β andΒaddGoal
Β actions fromΒgoalAction.js
Β to handle actions related to goals. - Ensure the payload of theΒ
addGoal
Β action includes a uniqueΒid
Β generated usingΒDate.now()
Β and the text value from the input field. - Implement theΒ
handleRemoveGoal
Β function to dispatch theΒremoveGoal
Β action with the corresponding goal. - Utilize theΒ
map
Β function to iterate over theΒgoals
Β array and render each goal, displaying its text.
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 6
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 4.17
Challenge: Connecting Redux with React
Swipe to show menu
Step 4
Focus on involving Redux logic in a React app. Connect React components and the Redux store to enable state management and actions.
Example
Ship Tracker App
Challenge
Form.jsx:
- Open the
Form.jsx
file. - Import the
useDispatch
hook from thereact-redux
package. This hook will be used to dispatch actions to the Redux store. - Import the
addGoal
action from thegoalAction.js
file. This action is responsible for adding a goal to the Redux store. - Initialize the
dispatch
variable inside the component by calling theuseDispatch
hook. - Complete the
handleFormSubmit
function by dispatching theaddGoal
action. Use thedispatch
function and pass in an object with the goal details:{ id: Date.now(), text: goal }
. TheDate.now()
generates a unique ID for each goal. - Reset the form after submission by calling the
resetForm
function.
GoalList.jsx:
- Open the
GoalList.jsx
file. - Import the
useDispatch
anduseSelector
hooks from thereact-redux
package. These hooks will be used to access the Redux store and dispatch actions. - Import the
removeGoal
action from thegoalAction.js
file. This action is responsible for removing a goal from the Redux store. - Initialize the
goals
variable using theuseSelector
hook and access thegoals
state from the Redux store. - Initialize the
dispatch
variable by calling theuseDispatch
hook. - Complete the
handleRemoveGoal
function by dispatching theremoveGoal
action. Pass in thegoal
as a parameter. - Finish the logic of rendering the array of goals by mapping over the
goals
array and rendering each goal. - Display the text of each goal and add a button with an
onClick
event that calls thehandleRemoveGoal
function and passes in the respectivegoal
.
- Use theΒ
useDispatch
Β andΒuseSelector
Β hooks to access the Redux store and dispatch actions. - Work with theΒ
removeGoal
Β andΒaddGoal
Β actions fromΒgoalAction.js
Β to handle actions related to goals. - Ensure the payload of theΒ
addGoal
Β action includes a uniqueΒid
Β generated usingΒDate.now()
Β and the text value from the input field. - Implement theΒ
handleRemoveGoal
Β function to dispatch theΒremoveGoal
Β action with the corresponding goal. - Utilize theΒ
map
Β function to iterate over theΒgoals
Β array and render each goal, displaying its text.
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 6