Currently, I'm working on react native and using Redux
I'm facing a problem, when dispatching the reducer, it saying not a function.
here's how I configure the store
import { configureStore } from "@reduxjs/toolkit";
import navReducer from "./slices/navSlice";
export const store = configureStore({
reducer: {
nav: navReducer,
},
});
here's my reducer
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
origin: null,
destination: null,
travelTimeInformation: null,
};
export const navSlice = createSlice({
name: "nav",
initialState,
reducer: {
setOrigin: (state, action) => {
state.origin = action.payload;
},
setDestination: (state, action) => {
state.destination = action.payload;
},
setTravelTimeInformation: (state, action) => {
state.travelTimeInformation = action.payload;
},
},
});
export const { setOrigin, setDestination, setTravelTimeInformation } =
navSlice.actions;
export const selectOrigin = (state) => state.nav.origin;
export const selecDestination = (state) => state.nav.destination;
export const selectTravelTimeInformation = (state) =>
state.nav.travelTimeInformation;
export default navSlice.reducer;
calling the store in App.js
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Provider } from "react-redux";
import HomeScreen from "./screens/HomeScreen";
import { store } from "./store";
import { SafeAreaProvider } from "react-native-safe-area-context";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import MapScreen from "./screens/MapScreen";
export default function App() {
const Stack = createStackNavigator();
return (
<Provider store={store}> <<-- calling in here
<NavigationContainer>
<SafeAreaProvider>
<Stack.Navigator>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="MapScreen"
component={MapScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</SafeAreaProvider>
</NavigationContainer>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
here the component that is using the reducer (HomeScreen.js)
import React from "react";
import { StyleSheet, Text, View, SafeAreaView, Image } from "react-native";
import tw from "tailwind-react-native-classnames";
import NavOptions from "../components/NavOptions";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import { GOOGLE_MAPS_APIKEY } from "@env";
import { useDispatch } from "react-redux";
import { setDestination, setOrigin } from "../slices/navSlice";
const HomeScreen = () => {
const dispatch = useDispatch();
return (
<SafeAreaView style={tw`bg-white h-full`}>
<View style={tw`p-5`}>
<GooglePlacesAutocomplete
placeholder="Where From"
styles={{
container: {
flex: 0,
},
textInput: {
fontSize: 18,
},
}}
onPress={(data, details = null) => {
dispatch(
**setOrigin({** // <<--this line says setOrigin is not a function
location: details.geometry.location,
description: data.description,
})
);
dispatch(setDestination(null));
}}
fetchDetails={true}
returnKeyType={"search"}
enablePoweredByContainer={false}
minLength={2}
query={{
key: GOOGLE_MAPS_APIKEY,
language: "en",
}}
nearbyPlacesAPI="GooglePlacesSearch"
debounce={400}
/>
<NavOptions />
</View>
</SafeAreaView>
);
};
export default HomeScreen;
error message
(0, _navSlice.setOrigin) is not a function. (In '(0, _navSlice.setOrigin)({
location: details.geometry.location,
description: data.description
})', '(0, _navSlice.setOrigin)' is undefined)
at node_modules\react-native-google-places-autocomplete\GooglePlacesAutocomplete.js:268:19 in request.onreadystatechange
at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:592:4 in setReadyState
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:395:6 in __didCompleteResponse
at node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
When I press F12 on the setOrigin
function, it's pointing to the right file.
What am I missing?
The error stating that setOrigin is not a function is resolved by naming the reducers object inside navSlice as "reducers" with an "s" instead of "reducer". Thank you and keep it up
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.