目前,我正在开发react native并使用Redux
我遇到了一个问题,当调度减速器时,它说不是一个功能。
下面是我如何配置存储
import { configureStore } from "@reduxjs/toolkit";
import navReducer from "./slices/navSlice";
export const store = configureStore({
reducer: {
nav: navReducer,
},
});
这是我的减速器
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;
调用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",
},
});
此处为使用缩减器的组件(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;
错误讯息
(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
当我在setOrigin
函数上按F12时,它指向正确的文件。
我错过了什么?
1条答案
按热度按时间dm7nw8vv1#
声明setOrigin不是函数的错误通过将navSlice中的reducers对象命名为带有“s”的“reducers”而不是“reducer”来解决。谢谢,请继续👍