Skip to content

Implementation

ZoltanTabi edited this page Mar 13, 2021 · 2 revisions

useSelector

Use if you want to use states

import { useSelector } from 'react-redux';
import { RootState } from '../redux';

const labelState = useSelector((state: RootState) => state.labelState);

useDispatch

Use for async action call

import { useDispatch } from 'react-redux';

const dispatch = useDispatch();
dispatch(ACTION)

useNavigation

Use for navigate to other screen
Example:

import { useNavigation } from '@react-navigation/native';

navigation.navigate('CameraScreen');

Example with params:

import { useNavigation } from '@react-navigation/native';

navigation.navigate('CameraScreen', {
    message: 'message from MapScreen'
});

useRoute

Use if you give a params.

import { useRoute, RouteProp } from '@react-navigation/native';

const route = useRoute<RouteProp<{ params: { message: string } }, 'params'>>();

const message = route.params?.message;

Functional Component with type checking props

import { FC, ReactElement } from 'react';

const COMPONENTNAME: FC<INTERFACE> = ( props: INTERFACE): ReactElement => { return() }

useState with type checking

import { useState } from 'react';

const [stateName, stateChangeFunctionName] = useState<INTERFACE>(INTERFACE implemented);

stateChangeFunctionName(INTERFACE implemented);