Зміст курсу
Redux Toolkit & React
Redux Toolkit & React
Challenge: Involving Redux into 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
anduseSelector
hooks to access the Redux store and dispatch actions. - Work with the
removeGoal
andaddGoal
actions fromgoalAction.js
to handle actions related to goals. - Ensure the payload of the
addGoal
action includes a uniqueid
generated usingDate.now()
and the text value from the input field. - Implement the
handleRemoveGoal
function to dispatch theremoveGoal
action with the corresponding goal. - Utilize the
map
function to iterate over thegoals
array and render each goal, displaying its text.
Все було зрозуміло?