Try to search your question here, if you can't find : Ask Any Question Now ?

How to integrate React MD autocomplete with redux?

HomeCategory: stackoverflowHow to integrate React MD autocomplete with redux?
Avatarpushpa asked 1 week ago

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.

1 Answers
Best Answer
AvatarMikhail answered 1 week ago
Your Answer

12 + 8 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com