When API post is successful, dispatch a get request – React/Redux

I have a small app that displays a component that is a list (JobsList) and another component that that contains a text field and submit button (CreateJob). While I am able to populate JobsList with API data (passing through Redux), I am not sure how I should update JobsList with a new API call, once I have successfully posted a new job in CreateJob. This is the code I have so far:

JobsList.js

import React, { Fragment, useEffect } from 'react';
import { connect } from 'react-redux';
import JobCard from './JobCard';
import CreateJob from './CreateJob';
import api from './Api';
import { JOBS_LOADED } from './ActionTypes';

const JobsList = ({ jobs, onLoad }) => {

useEffect(() => {
    const fetchJobs = async () => {

        try {
            const data = await api.Jobs.getAll();
            onLoad({ data });
        } catch (err) {
            console.error(err);
        }
    };
    fetchJobs();
}, [onLoad]);

return (
    <Fragment>
        <CreateJob />
        {teams.map(job => (
            <JobCard job={job} key={team.jobId} />
        ))}
    </Fragment>
);
}

const mapStateToProps = state => ({
    jobs: state.jobsReducer.teams
});

const mapDispatchToProps = dispatch => ({
    onLoad: payload =>
        dispatch({ type: JOBS_LOADED, payload }),
});

export default connect(mapStateToProps, mapDispatchToProps)(JobsViewer);

CreateJob.js

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import api from './Api';

const CreateJob = () => {
const [state, setState] = React.useState({
    jobName: '',
    creator: ''
});

const handleInputChange = event => {
    setState({
        ...state,
        [event.target.name]: event.target.value
    });
    // validation stuff
}

const handleSubmit = async e => {
    api.Jobs.create({state})
    try {
        await request;
        // Reload the Jobs list so it does an another API request to get all new data
        // DO I CALL A DISPATCH HERE?????
    } catch (err) {
        console.error(err);
    }
}

return (
    <div>
        <TextField
            name="jobName"
            value={state.jobName || ''}
            onChange={handleInputChange}
        />
        <Button onClick={handleSubmit}>Create job</Button>
    </div>
);
}

export default CreateJob;

JobsReducer.js

import { TEAMS_LOADED } from './ActionTypes';

export default (state = {teams: []}, action) => {
switch (action.type) {
    case TEAMS_LOADED:
        return {
            ...state,
            teams: action.payload.data,
        };
    default:
        return state;
}
};

In the success result in handleSubmit in CreateJob.js, how do I trigger/dispatch a new API call to update JobsList from CreateJob.js? I’m new to react/redux so apologies for any poor code. Any advice for a learner is greatly appreciated.

Source: ReactJs