How to refresh state using React, Redux, and redux-form

Question

Fairly new to these technologies and am at wit's end. I've got two components; a parent which contains a form (using redux-form) and writes a new record to a database, and a child which lists some data.

The only thing I can't get to work is refreshing that child list when the form submit completes. If I refresh the page, the new data is visible. From what I had read, it was my understanding that by wiring up redux-form, that my state would refresh automatically...or something like that. Am I even going about this the right way? Here's everything...

My index reducer:

import { combineReducers } from 'redux';
import { reducer as formReducer } from "redux-form";
import ItemsReducer from "../reducers/items";

const rootReducer = combineReducers({
    form: formReducer,
    items: ItemsReducer
});

export default rootReducer;

My items reducer:

import { GET_ALL_ITEMS } from "../actions/items";

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

My actions:

import axios from "axios";

export const GET_ALL_ITEMS = "GET_ALL_ITEMS";
export const SAVE_ITEM = "SAVE_ITEM";

const ROOT_API_URL = "http://myapi:3000/api";

export function getAllItems() {
    let request = axios.get(`${ROOT_API_URL}/items`);
    return {
        type: GET_ALL_ITEMS,
        payload: request
    };
}

export function saveItem(item, callback) {
    let request = axios
        .post(`${ROOT_API_URL}/item`, item)
        .then(() => callback());
    return {
        type: SAVE_ITEM,
        payload: request
    };
}

The (abbreviated) parent (list and form):

import ItemsList from "./items_list";

...

onSubmit = (item) => {
    let { saveItem } = this.props;
    saveItem(item, () => {
        // this is successful
    });
}

...

//the list in render()
<div>
    <ItemsList />
</div>

...

//redux-form wired up at bottom

export default reduxForm({
    form: "EditItemForm",
})(connect(null, { saveItem })(Items));

The child component:

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { getAllItems } from "../actions/items";

class Shows extends Component {
    componentDidMount() {
        this.props.getAllItems();
    }

    render() {
        return(
            <div className="body-content-partial">
                {this.renderItems()}
            </div>
        );
    }

    renderItems() {
        let { items } = this.props;
        return items.map(item => {
            return(
                <a href="#" key={item.id}>
                    <div className="list-item-noavatar list-lines-div">
                        <div className="list-title">
                            {item.name}
                        </div>
                        <div className="status-div">
                            <span className="status-indicator"></span>
                            {item.active}
                        </div>
                    </div>
                </a>
            );
        });
    }
}

function mapStateToProps(state) {
    return { items: state.items };
}

export default connect(mapStateToProps, { getAllItems })(Items);

Answer 1

OK, absolutely fixed it this time. I had to make a call to getAllItems() on the form submit as well as pass it into the dispatch portion of the connect() call, for the redux-form setup. Respectively:

import { saveItem, getAllItems } from "../actions/items";

...

onSubmit = (item) => {
    let { saveItem, onSave, getAllItems } = this.props;
    saveItem(item, () => {
        onSave();
        getAllItems();
    });
}

...

export default reduxForm({
    form: "ItemEditForm",
})(connect(null, { saveItem, getAllItems })(ItemEditForm));