How to trigger react-component-reload on a redux-state-change?

Question

Scenario: Auto-Completion

1. The value of a HTML input-element's is transfered to a redux-state.
2. This redux-state defines a query that is injected with tracker (as illustrated below).
3. The result of the query is displayed as auto-complete-options.

Problem: Component does not reload on input-value change

How can the component be reloaded, when the input-value changes?

Code-Snippet

const AutoComplete = (props) => {
    let handleChange = (event) => {
        props.setSearchQuery(event.target.value);
    };

    return (
        <div>
            <input
                type="text"
                onChange={(event) => handleChange(event)}
            />
        </div>
    );
};

export default connect(
    (state) => ({
        searchQuery: selectors.getSearchQuery(state)
    }),
    (dispatch) => ({
        setSearchQuery: (queryString) => dispatch(actions.setSearchQuery(queryString))
    })
)(
    composeWithTracker(
        (props, onDate) => {
            const searchResults = props.searchFunction(props.searchQuery);
            onDate(null, {searchResults});
        }
    )(AutoComplete)
);

Answer 1

I think it's because you dispatch an action. but the props of AutoComplete doesn't change, so the component will not render.

const AutoComplete = (props) => {
    let handleChange = (event) => {
        props.setSearchQuery(event.target.value);
    };

    return (
        <div>
            <input
                type="text"
                onChange={(event) => handleChange(event)}
            />
            <span>{this.props.searchQuery}</span>
        </div>
    );
};

just make sure searchQuery props is used in your component