How to integrate React MD autocomplete with redux?

Question

I want to integrate react-md with redux, but I don't understand how to trigger the onAutocomplete function. For now I only want to get some hard coded data from the Action, later on I'll add an api call and the search text as parameter.

Here is my action with the hard coded data that I want to dispatch:

export const searchCityAutoComplete = () => { 
   // no need for text parameter to search at this point

    const users = [{
        id: '1',
        name: 'Robin',

    }, {
        id: '2',
        name: 'Yan',

    }]
    return {
        type: "AUTOCOMPLETE_SEARCH",
        payload: users
    };
}

Here is the reducer:

const initState = {
      searchResults: [],
}

const sitesReducer = (state = initState, action) => {

    switch (action.type) {

        case "AUTOCOMPLETE_SEARCH":
            state = {
                ...state,
                searchResults: action.payload
            }
            break;

        default:
            return state;
    }

    return state;
}

export default sitesReducer;

And here is the component

import React from 'react';
import { connect } from 'react-redux';
import { searchCityAutoComplete } from '../actions/sitesActions';
import Autocomplete from 'react-md/lib/Autocompletes';

const SearchAutocomplete = ({ searchResults, onAutocomplete }) => (
    <div >
        <div className="md-text-container" style={{ marginTop: "10em" }}>
            <Autocomplete
                id="test-autocomplete"
                label="Autocomplete"
                dataLabel="name"
                autocompleteWithLabel
                placeholder="Search Users"
                data={searchResults}
                onAutocomplete={(...args) => {
                    searchCityAutoComplete(args)
                    console.log(args);
                }}
                deleteKeys={[
                    "id",
                ]}
                simplifiedMenu={false}
                anchor={{
                    x: Autocomplete.HorizontalAnchors.CENTER,
                    y: Autocomplete.VerticalAnchors.TOP
                }}
                position={Autocomplete.Positions.BOTTOM}
            />

        </div>

    </div>
);

const mapStateToProps = state => {
    console.log(state)
    return {
        searchResults: state.sitesReducer.searchResults,
    }
}

const mapDispatchToProps = dispatch => ({

    onAutocomplete: () => { dispatch(searchCityAutoComplete()) }
})

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

As you probably notice, the onAutocomplete function isn't in the same scope as the component... so I guess that's why it's not triggered. For a starting point I just need to get the data from the action - once I type in the autocomplete text box...thanks.

Answer 1

From react-md docs :

onAutocomplete : An optional function to call when an autocomplete suggestion is clicked either by using the mouse, the enter/space key, or touch.

And so onAutocomplete is only called when you select a suggestion. And it's not what you're looking for. What you're looking for is the onChange prop :

onChange : An optional function to call when the Autocomplete's text field value changes.

Here you can find a simple example code : https://codesandbox.io/s/muddy-cdn-l85sp

Answer 2

You can just pass your onAutocomplete action straight into Autocomplete component:

const SearchAutocomplete = ({ searchResults, onAutocomplete }) => (
    <div>
        <div className="md-text-container" style={{ marginTop: "10em" }}>
            <Autocomplete
                id="test-autocomplete"
                label="Autocomplete"
                dataLabel="name"
                autocompleteWithLabel
                placeholder="Search Users"
                data={searchResults}
                onAutocomplete={onAutocomplete} // Pass the action from props here
                deleteKeys={[
                    "id",
                ]}
                simplifiedMenu={false}
                anchor={{
                    x: Autocomplete.HorizontalAnchors.CENTER,
                    y: Autocomplete.VerticalAnchors.TOP
                }}
                position={Autocomplete.Positions.BOTTOM}
            />

        </div>

    </div>
);

Then in mapDispatchToProps you'll need to accept autocomplete value and do a search on it or set it to reducer:

const mapDispatchToProps = dispatch => ({
    onAutocomplete: (value) => dispatch(searchCityAutoComplete(value))
})


export const searchCityAutoComplete = (value) => { 
   // do smth with the value

    const users = [{
        id: '1',
        name: 'Robin',

    }, {
        id: '2',
        name: 'Yan',

    }]
    return {
        type: "AUTOCOMPLETE_SEARCH",
        payload: users
    };
}