this.props.fetch user is not a function - reactjs

Question

import React, { Component } from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { NavigationContainer, TabActions } from "#react-navigation/native";
import { fetchUser } from "../redux/actions";
const Tab = createBottomTabNavigator();
import FeedScreen from "./main/Feed";
import ProfileScreen from "./main/Profile";
import AddScreen from "./main/Add";
export class Main extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
return (
<Tab.Navigator>
<Tab.Screen
name="Feed"
component={FeedScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Add"
component={AddScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="plus-box" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="account-circle"
color={color}
size={26}
/>
),
}}
/>
</Tab.Navigator>
);
}
}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
});
const mapDispatchProps = (dispatch) => bindActionCreators({});
export default connect(mapStateToProps, mapDispatchProps)(Main);
this is my code and I am very confused it says that its imported but fetchUser is not being read.
im trying to export it from this file
import { USER_STATE_CHANGE } from "../constants/index";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
export function fetchUser() {
return (dispatch) => {
firebase
.firestore()
.collection("user")
.doc(firebase.auth().currentUser.uid)
.get()
.then((snapshot) => {
if (snapshot.exists) {
dispatch({ type: USER_STATE_CHANGE, currentUser: snapshot.data() });
} else {
console.log("does not exist");
}
});
};
}
if someone can please help. I have been stuck on this for days
I have tried searching forums and have found nothing. I went through the course again and still nothing I am currently working on this to meet a deadline for an important project and I have not been able to come to a solution. I have all the necessary packages installed, but still no dice. The source code did not help much either, so if anyone can hep it would be much appreciated.

Answer 1

Try having your mapDispatchToProps like this:
const mapDispatchProps = (dispatch) => ({ fetchUser: () => fetchUser()(dispatch) });
Here's the full file with the change applied:
import React, { Component } from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { NavigationContainer, TabActions } from "#react-navigation/native";
import { fetchUser } from "../redux/actions";
const Tab = createBottomTabNavigator();
import FeedScreen from "./main/Feed";
import ProfileScreen from "./main/Profile";
import AddScreen from "./main/Add";
export class Main extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
return (
<Tab.Navigator>
<Tab.Screen
name="Feed"
component={FeedScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Add"
component={AddScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="plus-box" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="account-circle"
color={color}
size={26}
/>
),
}}
/>
</Tab.Navigator>
);
}
}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
});
const mapDispatchProps = (dispatch) => ({ fetchUser: () => fetchUser()(dispatch) });
export default connect(mapStateToProps, mapDispatchProps)(Main);