Adding redux to react native app stop functioning, no error thrown

CleanCodeOnline 0
Viewed 14

I'am testing the google maps autocomplete API in my react native app. I have a simple text input field which accepts a search term and based on that the app fetches data from the mentioned api. I have used redux to update the status of the locations in the app.

But after adding redux I can't type anything in the text input, It was working fine earlier. I don't see any error, so I'm helpless on how to resolve. I have attached the relevant codes. Helps would be appreciated.

App.js

const store = createStore(reducers, compose(applyMiddleware(thunk)));

const App = () => {
    return (
        <Provider store={store}>
            <StatusBar barStyle="dark-content"/>
            <SearchScreen/>
        </Provider>
    );
};

export default App;

Reducers.js

export default combineReducers({
    locations
});

export default (locations = [], action) => {
    switch (action.type) {
        case actionTypes.FETCH_LOCATIONS:
            return action.payload;
        default:
            return locations;
    }
}

SearchScreen.js

const SearchScreen = () => {
    const [from, setFrom] = useState("");
    const dispatch = useDispatch();

    const handleFrom = (str) => {
        setFrom(str);
        if (from.length >= 5)
            dispatch(getLocations(from))
    }

    return (
        <SafeAreaView>
            <View style={styles.container}>
                <TextInput
                    style={styles.textInput}
                    placeholder="from"
                    value={from}
                    onChangeText={(str) => handleFrom(str)}/>
                <Text>{from}</Text>
            </View>
        </SafeAreaView>
    )
};

export default SearchScreen;

getLocations

export const getLocations = (searchTerm) => async (dispatch) => {
    try {
        const {response} = await api.fetchLocations(searchTerm);
        console.log(`response: ${JSON.stringify(response)}`);
        // dispatch({type: actionTypes.FETCH_LOCATIONS, payload: response?.predictions});
    } catch (e) {
        console.error(e);
    }
}

apis

const API = axios.create({
    baseURL: 'https://google-maps-autocomplete-plus.p.rapidapi.com/autocomplete'
});

API.interceptors.request.use((req) => {
    req.headers = {
        'X-RapidAPI-Key': 'API-KEY',
        'X-RapidAPI-Host': 'google-maps-autocomplete-plus.p.rapidapi.com'
    };

    return req;
});

export const fetchLocations = (query) => API.get(`?query=${query}&limit=5`);
axios react-native redux reactjs
1 Answers

async function always returns a Promise. So wait until it has a value before passing it to disptach.

export const getLocations = (searchTerm) => async {
    try {
        const { data } = await api.fetchLocations(searchTerm);
        console.log(`response: ${JSON.stringify(data)}`);
        return data;
    } catch (e) {
        console.error(e);
        return [];
    } 
}

const handleFrom = (str) => {
        setFrom(str);
        if (str.length >= 5)
            getLocations(str).then(data => dispatch(data, {});
}
Shri Hari L0
Related