We Keep Coding

How to export or use component state as hook

I want to use hook to get and set the value of my component WITHOUT PROPS. I import the component and it lists the data returned from the request, ok, but when I use the hook to see the data it returns empty, as if it were another instance.
Initially I used the state of the parent component, but when I needed to change some value of my component, everything would re-render as it affected the state of the parent component, so I want to isolate the state in the child component and use it freely as a hook elsewhere .
How I would like to use:
import MyComp, { useMyHook } from '../../../components/MyComp';
const OtherComp = () => {
const { data } = useMyHook();
return(
<div>
<button type="button" onClick={() => console.log(data)}>
click test
</button>
<MyComp />
</div>
);
};
export default OtherComp;
Component render
Example1
Example2
But the click button log: [ ]
Without using external components/libs like redux and etc.
My custom hook:
src/useMyHook.ts
import { useState } from 'react';
export const useMyHook = () => {
const [data, setData] = useState<any[]>([]);
const addItem = (item: unknown) => {
setData([...date, item]);
};
return { data, setData, addItem};
};
export default useMyHook;
My main component:
src/MyComp.tsx
import {useEffect} from 'react';
import useMyHook from './useMyHook';
const MyComp = () => {
const { data, setData } = useMyHook();
const req = async() => {
const {values} = await anyRequest(); // to do any request
setData(values);
};
useEffect(() => { req() },[]);
return(
<div>
{data.map((item) => <p>{item.name}</p>)}
</div>
);
};
export { useMyHook };
export default MyComp;
src/index.tsx
import MyComp, { useMyHook } from './MyComp';
export default MyComp;
export { useMyHook };

To demonstrate my comment:
import React,{useState, createContext} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import useMyHook from './useMyHook'
import Example1 from './Example1'
import Example2 from './Example2'
import OtherComp from './OtherComp'
import {Data, DataSetter} from './types'
type DContext = {
data:Data,
setData:DataSetter
}
export const DataContext = createContext({
data:[],
setData:()=>{}
} as DContext)
export default function App() {
const [data, setData] = useState<Data>([])
return (
<View style={styles.container}>
<DataContext.Provider value={{data,setData}}>
<Example1/>
<Example2/>
<OtherComp/>
</DataContext.Provider>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
import { useContext, useCallback } from 'react';
import { DataContext } from './App';
export const useMyHook = () => {
const { data, setData } = useContext(DataContext);
// wrapped in useCallback to prevent function from
// being recreated
const addItem = useCallback((item: unknown) => {
setData(prev=>[...prev, item]);
},[]);
return { data, setData, addItem };
};
export default useMyHook;
useMyHook usage:
import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import useMyHook from './useMyHook';
export default function Example1() {
const { data, addItem } = useMyHook();
return (
<View style={{ width: '100%' }}>
<Button
title="Add Item From Example 1"
onPress={() => {
addItem(Math.floor(Math.random() * 25) + ' From Example1');
}}
/>
</View>
);
}
A demo

currentUser is returning undefined

I'm new to programming and following this video, my code until now has had no problems, but when I try
console.log(currentUser);
It returns undefined while it shouldn't, the user is logged in and all of their information is correct in Firebase. Also, my code doesn't show any errors.
This is the code:
import React, { Component } from 'react';
import {Text, View} from 'react-native';
import firebase from 'firebase'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchUser } from '../../redux/actions/index';
export class Main extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
const { currentUser } = this.props;
console.log(currentUser)
if (currentUser==undefined){
return(
<View></View>)
}
return (
<View style={{ flex: 1, justifyContent: 'center'}}>
<Text>User is logged in</Text>
</View>
)
}
}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
export default connect(null, mapDispatchProps)(Main);
And this is the parent component code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
require('dotenv').config();
import firebase from 'firebase';
const firebaseConfig = {
//personal info
};
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './redux/reducers';
import thunk from 'redux-thunk';
const store = createStore(rootReducer, applyMiddleware(thunk))
if(firebase.apps.length === 0){
firebase.initializeApp(firebaseConfig)
}
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import LandingScreen from './Components/auth/Landing';
import RegisterScreen from './Components/auth/Register';
import MainScreen from './Components/auth/Main';
const Stack = createStackNavigator();
export class App extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
}
}
componentDidMount(){
firebase.auth().onAuthStateChanged((user) => {
if (!user){
this.setState({
loggedIn: false,
loaded: true,
})
}else{
this.setState({
loggedIn: true,
loaded: true,
})
}
})
}
render() {
const { loggedIn, loaded } = this.state
if (!loaded){
return(
<View style={{ flex: 1, justifyContent: 'center'}}>
<Text>Loading</Text>
</View>
)
}
if (!loggedIn) {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Landing">
<Stack.Screen name="Landing" component={LandingScreen} options={{headerShown: false}}/>
<Stack.Screen name="Register" component={RegisterScreen}/>
</Stack.Navigator>
</NavigationContainer>
);
}
return(
<Provider store={store}>
<MainScreen/>
</Provider>
)
}
};
export default App

Why state inside mapStateToProps functions is always "undefined"?

I am making a very basic counter app using react native and i am using redux in it for practice, but i am getting some problem.
Problem
In the mapStateToProps() function in my HomeScreen Component, the state argument, passed, is always getting a value of undefined, therefore my UI is also not updating. I used Redux DevTools and monitored the state and i get to know the state is changing absolutely fine on clicking the two buttons but inside mapStateToProps() function, it is always undefined.
Please correct me where I am going wrong.
This is my HomeComponent code
import React, { Component } from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import { connect } from 'react-redux';
import * as counterActions from '../redux/actions/counterAction';
class HomeScreen extends Component{
render(){
return(
<View style={styles.homeView}>
<View>
<Text style={styles.homeText}>Basic Counter</Text>
</View>
<View style={styles.counterStyle}>
<View style={{marginRight: 20, width: 50}}>
<Button title="-" onPress={() => this.props.decreaseCounter()}></Button>
</View>
<Text style={{fontSize: 40, color: 'black'}}> {"Value = " + this.props.count} </Text>
<View style={{marginLeft: 20, width: 50}}>
<Button title="+" onPress={() => this.props.increaseCounter()} ></Button>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
homeView: {
flex: 1,
margin: 24,
alignItems: 'center',
},
homeText: {
color: 'black',
fontSize: 24,
},
counterStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
});
function mapStateToProps(state) {
return {
count: state.count
};
}
function mapDispatchToProps(dispatch) {
return {
increaseCounter: () => dispatch(counterActions.increaseCounter()),
decreaseCounter: () => dispatch(counterActions.decreaseCounter())
};
}
export default connect(mapStateToProps,mapDispatchToProps)(HomeScreen);
This is my reducer function
const initialState = {
count: 0
};
export default function counterReducer(state = initialState, action) {
switch(action.type){
case "INCREASE_COUNTER":
return {
...state,
count: state.count + 1
};
case "DECREASE_COUNTER":
return {
...state,
count: state.count - 1
};
default:
return state;
}
}
This is my root level component
import React from 'react';
import { Provider } from 'react-redux';
import Main from './components/MainComponent';
import rootReducer from './redux/reducers/index';
import { createStore } from 'redux';
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default function App() {
return (
<Provider store={store}>
<Main />
</Provider>
);
}

You must retrieve the count from the specific 'reducer' that you have state.counterReducer.count. In this case, your reducer is counterReducer.
Redux always assumes you have multiple reducers because each reducer is by itself and changing each reducer shouldn't update another reducer. Redux uses combineReducers for separating them.
you can read redux documentation about combining reducers

In order to answer this, you'll also need to show your rootReducer as well as the counterActions file. I'd likely guess there's an issue in one of those files if state isn't properly showing up in mapStateToProps. I've taken your example and moved it into a code sandbox where state and props are accurately reflected. Here are the changes I made. Keep in mind this is in the context of a web application, and not a react-native app, but since this is only dealing with state it shouldn't matter much.
App.js
import React from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import Home from "./Home";
import rootReducer from "./reducers";
const store = createStore(rootReducer);
export default function App() {
return (
<Provider store={store}>
<Home />
</Provider>
);
}
Home.js
import React, { Component } from "react";
import { connect } from "react-redux";
import counterActions from "./reducers/counter/counterActions";
class HomeScreen extends Component {
render() {
return (
<div>
<div>
<p>Basic Counter</p>
</div>
<div>
<div>
<button onClick={this.props.decreaseCounter}>-</button>
</div>
<p style={{ fontSize: 40, color: "black" }}>
{`value= ${this.props.count}`}
</p>
<div style={{ marginLeft: 20, width: 50 }}>
<button onClick={this.props.increaseCounter}>+</button>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
count: state.counter.count
};
}
function mapDispatchToProps(dispatch) {
return {
increaseCounter: () => dispatch(counterActions.increaseCounter()),
decreaseCounter: () => dispatch(counterActions.decreaseCounter())
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(HomeScreen);
reducers/index.js
import { combineReducers } from "redux";
import counterReducer from "./counter/counterReducer";
const rootReducer = combineReducers({
counter: counterReducer
});
export default rootReducer;
reducers/counter/counterReducer.js
import { actionConstants } from "./counterActions";
const initialState = {
count: 0
};
export default function counterReducer(state = initialState, action) {
switch (action.type) {
case actionConstants.INCREASE_COUNTER:
return {
...state,
count: state.count + 1
};
case actionConstants.DECREASE_COUNTER:
return {
...state,
count: state.count - 1
};
default:
return state;
}
}
reducers/counter/counterActions.js
const actionConstants = {
INCREASE_COUNTER: "INCREASE_COUNTER",
DECREASE_COUNTER: "DECREASE_COUNTER"
};
const counterActions = {
increaseCounter() {
return {
type: actionConstants.INCREASE_COUNTER
};
},
decreaseCounter() {
return {
type: actionConstants.DECREASE_COUNTER
};
}
};
export { counterActions as default, actionConstants };
Heres's a link to the working sandbox

How to move from first screen(just with button to tabbed activity) to second screen(tab activity) in react native

I have three .js files in my react native project:
App.js
LoginPage.js
RootNavigation.js
My launcher screen is LoginPage.js now i need to go to Rootnavigation.js .
RootNavigation.js has import MainTabnavigator.js
App.js:
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font } from 'expo';
import { Ionicons } from '#expo/vector-icons';
import RootNavigation from './navigation/RootNavigation';
import LoginPage from './screens/LoginPage';
import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
export class App extends React.Component {
state = {
isLoadingComplete: false,
};
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<RootNavigation />
</View>
);
}
}
_loadResourcesAsync = async () => {
return Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free
// to remove this if you are not using it in your app
'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
}),
]);
};
_handleLoadingError = error => {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
export default justsms = createStackNavigator(
{
First: { screen: LoginPage },
Second: { screen: App }
});
LoginPage.js:
import React from 'react';
import {Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, Button} from 'react-native';
export default class LoginPage extends React.Component {
static navigationOptions={
title:'Login Page'
};
NavigateActivityFunction = () =>
{
this.props.navigation.navigate('Second');
}
render(){
return(<View style={styles.container}>
<Button title='Tab Activity' onPress={this.NavigateActivityFunction}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent:'center'
}
});
RootNavigation.js:
import React from 'react';
import { Notifications } from 'expo';
import { createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import registerForPushNotificationsAsync from '../api/registerForPushNotificationsAsync';
const AppNavigator = createSwitchNavigator({
// You could add another route here for authentication.
// Read more at https://reactnavigation.org/docs/en/auth-flow.html
Main: MainTabNavigator,
});
export default class RootNavigation extends React.Component {
componentDidMount() {
this._notificationSubscription = this._registerForPushNotifications();
}
componentWillUnmount() {
this._notificationSubscription && this._notificationSubscription.remove();
}
render() {
return <AppNavigator />;
}
_registerForPushNotifications() {
// Send our push token over to our backend so we can receive notifications
// You can comment the following line out if you want to stop receiving
// a notification every time you open the app. Check out the source
// for this function in api/registerForPushNotificationsAsync.js
registerForPushNotificationsAsync();
// Watch for incoming notifications
this._notificationSubscription = Notifications.addListener(this._handleNotification);
}
_handleNotification = ({ origin, data }) => {
console.log(`Push notification ${origin} with data: ${JSON.stringify(data)}`);
};
}
MainTabNavigator.js:
import React from 'react';
import { Platform } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
),
};
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? `ios-link${focused ? '' : '-outline'}` : 'md-link'}
/>
),
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? `ios-options${focused ? '' : '-outline'}` : 'md-options'}
/>
),
};
export default createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
Here when i click on button in LoginPage.js it should go to tab activity . I tried importing MainTabNavigator.js in App.js but when i click on button nothing is happening. I would be glad if someone Help me in this issue.

Route should declare a screen

I am trying to combine navigation, more exactly stack navigation with my react native redux application, and I encountered this error during debugging. From what I've already searched, it's because the navigation isn't really compatible with the redux mode of work. So I tried a solution to my problem, but still I have the same error. Here is my code:
Login.js
import React, { Component } from 'react';
import { View, ActivityIndicator, TouchableHighlight } from 'react-native';
import { getLogger, issueToText } from '../core/utils';
import styles from '../core/styles';
import { Card, Button, FormLabel, FormInput } from "react-native-elements";
import { connect } from 'react-redux'
import { loginAction } from '../actions/LoginActions'
class LoginComponent extends Component {
constructor(props) {
super(props);
this.login = this.login.bind(this)
}
render() {
const { error, isLoading } = this.props;
const inputFormProp = {
username: '',
password: ''
};
return (
<View style={{ paddingVertical: 20 }}>
<Card>
<FormLabel>Email</FormLabel>
<FormInput value={inputFormProp.username} onChangeText={(text) => inputFormProp.username = text} />
<FormLabel>Password</FormLabel>
<FormInput value={inputFormProp.password} onChangeText={(text) => inputFormProp.password = text} />
<Button
buttonStyle={{ marginTop: 20 }}
backgroundColor="#03A9F4"
title="SIGN IN"
onPress={this.login(inputFormProp)}
/>
</Card>
<ActivityIndicator animating={this.props.isLoading} style={styles.activityIndicator} size="large" />
</View>
);
}
login(inputFormProp) {
console.log(this.props)
const { store } = this.props.screenProps.store;
console.log(loginAction)
const { dispatch } = this.props
console.log(dispatch)
dispatch(loginAction(inputFormProp))
.then(() => {
if (this.props.error === null && this.props.isLoading === false) {
if (store.getState().auth.token) {
this.props.navigation.navigate('ProductList', { token: store.getState().auth.token });
}
}
})
.catch(error => {
});
}
}
function mapStateToProps(state) {
const { error, isLoading } = state.auth
return {
error,
isLoading,
}
}
export default connect(mapStateToProps)(LoginComponent)
App.js
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import { authReducer } from "./src/reducers/LoginReducer";
import { productReducer } from "./src/product/service";
import { ProductList } from "./src/product/ProductList";
import { LoginComponent } from "./src/components/Login";
import { Provider, connect } from "react-redux";
import { StackNavigator, addNavigationHelpers } from "react-navigation";
import Routes from "./src/core/routes";
const AppNavigator = StackNavigator(Routes, {
navigationOptions: {
title: ({ state }) => {
if (state.params) {
return `${state.params.title}`;
}
}
}
});
const navReducer = (state, action) => {
const newState = AppNavigator.router.getStateForAction(action, state);
return newState || state;
};
#connect(state => ({
nav: state.nav
}))
class AppWithNavigationState extends Component {
render() {
return (
<AppNavigator
navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav
})}
/>
);
}
}
const initialState = {
auth: { isLoading: false, error: null },
};
const rootReducer = combineReducers({ product: productReducer, auth: authReducer, nav: navReducer });
let store = createStore(rootReducer, initialState,
compose(applyMiddleware(thunk, createLogger())));
export default function App() {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
);
}
Routes.js
import { ProductList } from "../product/ProductList";
import { LoginComponent } from "../components/Login";
const Routes = {
Login: { screen: LoginComponent },
ProductList: { screen: ProductList }
};
export default Routes;
Here is my error: Route Login should declare a screen.
What did I do wrong with my code? Thank you.

I fixed the error. It was because I added between LoginComponent {} in the routes.js file at:
import { LoginComponent } from "../components/Login";