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:

1. Open the Form.jsx file.

2. Import the useDispatch hook from the react-redux package. This hook will be used to dispatch actions to the Redux store.

3. Import the addGoal action from the goalAction.js file. This action is responsible for adding a goal to the Redux store.

4. Initialize the dispatch variable inside the component by calling the useDispatch hook.

5. Complete the handleFormSubmit function by dispatching the addGoal action. Use the dispatch function and pass in an object with the goal details: { id: Date.now(), text: goal }. The Date.now() generates a unique ID for each goal.

6. Reset the form after submission by calling the resetForm function.

GoalList.jsx:

1. Open the GoalList.jsx file.

2. Import the useDispatch and useSelector hooks from the react-redux package. These hooks will be used to access the Redux store and dispatch actions.

3. Import the removeGoal action from the goalAction.js file. This action is responsible for removing a goal from the Redux store.

4. Initialize the goals variable using the useSelector hook and access the goals state from the Redux store.

5. Initialize the dispatch variable by calling the useDispatch hook.

6. Complete the handleRemoveGoal function by dispatching the removeGoal action. Pass in the goal as a parameter.

7. Finish the logic of rendering the array of goals by mapping over the goals array and rendering each goal.

8. Display the text of each goal and add a button with an onClick event that calls the handleRemoveGoal function and passes in the respective goal.

1. Use the useDispatch and useSelector hooks to access the Redux store and dispatch actions.

2. Work with the removeGoal and addGoal actions from goalAction.js to handle actions related to goals.

3. Ensure the payload of the addGoal action includes a unique id generated using Date.now() and the text value from the input field.

4. Implement the handleRemoveGoal function to dispatch the removeGoal action with the corresponding goal.

5. Utilize the map function to iterate over the goals array and render each goal, displaying its text.