Как я могу использовать значение, возвращаемое моим редуктором

У меня здесь проблемы, если кто-нибудь может мне помочь, будет здорово.

Итак, я создаю это приложение, используя перехватчики реакции и redux, я хочу использовать значение, которое я храню в базе данных, чтобы выполнить какое-то действие, скажем, console.log, который json или просто идентификатор. Часть хранения в базе данных и все это в порядке, но я просто не могу понять, как использовать это в компоненте реакции после возврата из отправки (addReport (newReport)).

Извини, если это глупый вопрос

Мой компонент NewReport.js

import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { getEmployees } from '../../actions/employees'
import { getTypeContracts } from '../../actions/typeContract'
import { addReport } from '../../actions/reports'


export default function NewRegister() {
    const [newReportState, setNewReportState] = useState({
        employee: "",
        typeContract: "",
        initialDate: "",
        finalDate: ""
    })
    const [reportState, setReportState] = useState({
        id:"",
        employee: "",
        typeContract: "",
        initialDate: "",
        finalDate: ""
    })

    const dispatch = useDispatch()
    useEffect(() => {
        // get employees for select input
        dispatch(getEmployees())
        // get type of contracts for select input
        dispatch(getTypeContracts())
    }, [])
    const employees = useSelector(state => state.employees.employee)
    const typeContracts = useSelector(state => state.typeContracts.typeContract)
    const reports = useSelector(state => state.reports.report)

    // send values from the form to state
    const handleChange = e => {
        const { name, value } = e.target
        // for verification of the change of the state, aways console.log outside this function
        setNewReportState({
            ...newReportState,
            [name]: value
        })
    }


    // submit the form
    function sendReportToStorage(newReport){
        dispatch(addReport(newReport))
        // IT'S HERE THAT I WANT TO DO SOME ACTION
    }

    function handleSubmit(e) {
        e.preventDefault()
        // grab the values from the state
        const { employee, typeContract, initialDate, finalDate } = newReportState
        const newReport = { employee, typeContract, initialDate, finalDate }
        //console.log(newReport)
        // to do -> if the values in newReport != initial Report
        sendReportToStorage(newReport)
    }        
    return (
        <div className="content">
            <h1 className="title-page">New Report</h1>
            <form onSubmit={handleSubmit} >
                <div className="form-input">
                    <label>Employee</label>
                    <select id="employees" name="employee" onChange={handleChange}>
                        <option value="0"></option>
                        {employees.map(employee => (
                                <option value={employee.id} key={employee.id}>{employee.name} - {employee.function}</option>
                            ))}
                    </select>
                    <button className="add-button">+</button>
                </div>
                <div className="form-input">
                    <label>Type of contract</label>
                    <select id="typeContract" name="typeContract" onChange={handleChange}>
                        <option value="0"></option>
                        {typeContracts.map(typeContract => (
                            <option value={typeContract.id} key={typeContract.id}>{typeContract.description}</option>
                        ))}
                    </select>
                    <button className="add-button">+</button>
                </div>
                <div className="form-input">
                    <label>Initial date</label>
                    <input type="date" name="initialDate" onChange={handleChange} />
                </div>
                <div className="form-input">
                    <label>Final date</label>
                    <input type="date" name="finalDate" onChange={handleChange} />
                </div>
                <button className="submit-button">New Report</button>
            </form>
        </div>
    )
}

Мои действия reports.js

import axios from 'axios'
import { GET_REPORTS, DELETE_REPORT, ADD_REPORT } from './types'


// GET REPORT
export function getReports() {
    return dispatch => {
        axios.get('/api/report/')
            .then(res => {
                dispatch({
                    type: GET_REPORTS,
                    payload: res.data
                })
                console.log(res.data)
            })
            .catch(
                err => dispatch(returnErrors(err.response.data, err.response.status))
            )
    }
}

// ADD REPORT
export const addReport = (report) => {
    return dispatch => {
        axios.post("api/report/", report)
            .then(res => {
                dispatch({
                    type: ADD_REPORT,
                    payload: res.data
                })
                console.log("added report")
                console.log(res.data)
            })
            .catch(err => console.log(err))
    }
}

Мой редуктор reports.js -> я думаю, что здесь должно возвращаться какое-то значение для реагирующего компонента.

import { GET_REPORTS, DELETE_REPORT, ADD_REPORT } from '../actions/types.js'


const initialState = {
    report: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case GET_REPORTS:
            return {
                ...state,
                report: action.payload
            }
        case DELETE_REPORT:
            return {
                ...state,
                report: state.report.filter(report => report.id !== action.payload)
            }
        case ADD_REPORT:
            return {
                ...state,
                report: [...state.report, action.payload]
            }
        default:
            return state
    }
}