App.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React, { useContext } from "react";
import { RootStackParamsList } from "./src/configs/navigation.configs";
import AuthSuspend from "./src/page/Feature/AuthSuspend/AuthSuspend";
import LoginApp from "./src/page/Login/LoginApp";
import MainApp from "./src/page/Main/MainApp";
import { AuthContext, AuthProvider } from "./src/context/authContext";

const RootStack = createStackNavigator<RootStackParamsList>();

const App = () => {
	const {state, actions} = useContext(AuthContext)
	actions
	return (
		<AuthProvider>
			<NavigationContainer>
				<RootStack.Navigator headerMode="none" initialRouteName="AuthSuspends">
					<RootStack.Screen name="AuthSuspends" component={AuthSuspend} />
					<RootStack.Screen name="Login" component={LoginApp} />
					<RootStack.Screen name="Main" component={MainApp} />
				</RootStack.Navigator>
			</NavigationContainer>
		</AuthProvider>
	);
};

export default App;

authContext.ts

import { Dispatch } from "react";
import { createContext } from "./createContext";

type State = {
	isLoading: boolean;
};

enum ActionsEnum {
	SET_IS_LOADING = "SET_IS_LOADING",
}

interface setIsLoadingInterface {
	type: typeof ActionsEnum.SET_IS_LOADING;
	payload: boolean;
}

type Actions = setIsLoadingInterface;

const defaultState: State = {
	isLoading: false,
};

const reducer = (state = defaultState, actions: Actions): State => {
	switch (actions.type) {
		case ActionsEnum.SET_IS_LOADING:
			return { ...state, isLoading: actions.payload };
		default:
			return state;
	}
};

const setIsLoadingActions = (isLoading: boolean) => ({
	type: ActionsEnum.SET_IS_LOADING,
	payload: isLoading,
});

const setIsLoading = (isLoading: boolean) => (dispatch: Dispatch<Actions>) => {
	dispatch(setIsLoadingActions(isLoading));
};

const mapDispatch = { setIsLoading };

export const { Context: AuthContext, Provider: AuthProvider } = createContext<
	State,
	Actions,
	typeof mapDispatch
>({
	defaultState,
	reducer,
	thunks: mapDispatch,
});

createContext.tsx

import React from "react";

type Cogs<
	State,
	Actions extends AnyAction,
	Thunk extends ActionCreatorsMapObject
> = {
	defaultState: State;
	reducer: (state: State, actions: Actions) => State;
	thunks: Thunk;
};

export interface Action<T = any> {
	type: T;
}

export interface AnyAction extends Action {
	[extraProps: string]: any;
}

export const createContext = <
	State,
	Actions extends AnyAction,
	Thunk extends ActionCreatorsMapObject
>(
	cogs: Cogs<State, Actions, Thunk>
) => {
	const { defaultState, reducer, thunks } = cogs;

	const [state, dispatch] = React.useReducer(reducer, defaultState);
	const Context = React.createContext<{
		state: State;
		actions: ActionCreatorsMapObject;
	}>({ state: defaultState, actions: {} });

	const Provider: React.FC = ({ children }) => {
		let bindActions = bindActionCreators(thunks, dispatch);

		return (
			<Context.Provider value={{ state, actions: bindActions }}>
				{children}
			</Context.Provider>
		);
	};

	return { Provider, Context };
};

function bindActionCreator<A extends AnyAction = AnyAction>(
	actionCreator: ActionCreator<A>,
	dispatch: React.Dispatch<A>
) {
	return function (this: any, ...args: any[]) {
		return dispatch(actionCreator.apply(this, args));
	};
}

export default function bindActionCreators(
	actionCreators: ActionCreatorsMapObject,
	dispatch: React.Dispatch<any>
) {
	const boundActionCreators: ActionCreatorsMapObject = {};
	for (const key in actionCreators) {
		const actionCreator = actionCreators[key];
		if (typeof actionCreator === "function") {
			boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
		}
	}
	return boundActionCreators;
}

export interface ActionCreator<A, P extends any[] = any[]> {
	(...args: P): A;
}

export interface Dispatch<A extends Action = AnyAction> {
	<T extends A>(action: T, ...extraArgs: any[]): T;
}

export interface ActionCreatorsMapObject<A = any, P extends any[] = any[]> {
	[key: string]: ActionCreator<A, P>;
}