Как использовать глобальные хуки в реагировать на натив?

Question

Я новичок в React Native и хочу использовать крючки реагирования для моего проекта. Я соединил свою страницу с useContext и useReducer и работает хорошо, но я не могу понять, подключить другую страницу с измененным государство. Я хочу глобализировать хуки .

Структура проекта: -

mydemo
----src
     --context
          ProductContext.js
          ProductReducer.js
          types.js
     --pages
       ---products
            index.js
            header.js
            single.js
            list.js

Код в ProductContext.js

    import {createContext} from 'react'

const ProductContext = createContext({
    productlist:[],
    addToCart: (product) => {}
})

export default ProductContext

код в ProductReducer.js

import {ADD_TO_CART} from './types';

const addToCart = (productId,state) =>{
    return {
        ...state,
        productList: state.productList.map((single) => (single.id === productId) ? {
            ...single,
            count: single.count + 1
        } : single)
    }
}

export default (state,action)=>{
    switch (action.type) {
        case ADD_TO_CART:
            return addToCart(action.payload, state);
        default:
            return state;
    }
}

код в index.js (внутри src / pages / products)

import React,{useReducer} from 'react'
import { View,StyleSheet } from 'react-native';

import Header from './header'
import List from './list'

import ProductReducer from '../../context/productReducer';
import ProductContext from '../../context/productContext';
import {ADD_TO_CART} from '../../context/types';

const ProductList = () => {

    const initialState = {
        productList:[
            {
                id:'0',
                name:'Coke',
                count:0
            },
            {
                id: '1',
                name: 'Pepsi',
                count: 0
            },
            {
                id: '2',
                name: 'Sprite',
                count: 0
            }
        ]
    }

    const [state, dispatch] = useReducer(ProductReducer, initialState);

    const addToCart = (productId) => {
        dispatch({
            type: ADD_TO_CART,
            payload: productId
        })

    }
    return (
        <ProductContext.Provider value={{productList:state.productList,addToCart}}>
            <View style={styles.container}>
                <Header/>
                <List addTocart={addToCart} />
            </View>
        </ProductContext.Provider>
    )
}
const styles = StyleSheet.create({
    container:{
        flex:1
    }
})

export default ProductList

С помощью этого кода я могу увеличить количество отдельных товаров на 1, и теперь я хочу еще одну страницу, в которой будет отображаться список товаров с количеством> 1. Поэтому я хочу подключить свои крючки к этой странице. Как мне этого добиться? Любая помощь для этого будет полезна. Спасибо