dispatch inside useEffect opposite result

Question

I am displaying a foto in the front using Leigh Halliday's Image Previews in React with FileReader from https://www.youtube.com/watch?v=BPUgM1Ig4Po and everything is super BUT:

1.I want to get information from the image is displaying, exactly the base64 info, and have it then globally in my reactjs app.

2.for that reason I made a Context, i configured it ok BUT:

when I am doing dispatch inside a useEffect I want the image rendering and the info store in my variable globally

but I have one thing or another

if my image renders ok in my front, I can not obtain the value of my dispatch and viceversa

this is the code of my component:

import React, { useContext, useEffect, useRef, useState } from 'react'
import { AuthContext } from '../../auth/AuthContext'
import { types } from '../../types/types'

export const ButtonLoadFoto = () => {

    const { dispatchFoto } = useContext(AuthContext)



    const [image, setImage] = useState('')
    const [preview, setPreview] = useState('')
    const [status, setStatus] = useState(false)




    useEffect(() => {
        if (image) {
            const reader = new FileReader()
            reader.onloadend = () => {
                setPreview(reader.result)
            }

            reader.readAsDataURL(image)
            setStatus(true)


        } else {
            setPreview('')
        }

    }, [image])

    // useEffect(() => {
    //     if (status) {
    //         dispatchFoto({
    //             type: types.foto,
    //             payload: {
    //                 foto: preview.split(',')[1]
    //             }
    //         })
    //     }
    //     return () => setStatus(false)


    // }, [preview])




    const fileInputRef = useRef()

    const handleRef = (e) => {
        e.preventDefault()
        fileInputRef.current.click()

    }

    const handleFile = (e) => {
        const file = e.target.files[0]
        if (file && file.type.substr(0, 5) === 'image') {
            setImage(file)

        }
    }


    return (
        <div className='load-input '>
            {
                preview
                    ?

                    (<img src={preview} alt='' onClick={() => setImage('')} />)
                    :

                    (<button
                        className='alert alert-danger'
                        onClick={handleRef}>
                        foto
                    </button>
                    )

            }
            < input
                type='file'
                style={{ display: 'none' }}
                ref={fileInputRef}
                accept='image/*'
                onChange={handleFile}


            />


        </div>
    )
}

in the code above if you put away the comments we will have the information we want but the foto won t display at all

thanks all for your time , I really appreciate!

EDIT

this is the main component

import React, { useEffect, useReducer } from 'react'
import { AuthContext } from './auth/AuthContext'
import { fotoReducer } from './components/formScreen/fotoReducer'



import { AppRouter } from './routers/AppRouter'


const initImage = () => {
    return { foto: '' }

}


export const CMI = () => {


   
    const [foto, dispatchFoto] = useReducer(fotoReducer, {}, initImage)


 
    return (
        <div>
            <AuthContext.Provider value={{
                foto,
                dispatchFoto
            }}>

                <AppRouter />

            </AuthContext.Provider>

        </div>
    )
}

this is the componenent I use

import React, { useContext} from 'react'
import { ButtonLoadFoto } from '../components/formScreen/ButtonLoadFoto'
import { AuthContext } from '../auth/AuthContext'

export const FormScreen = () => {

    const { foto } = useContext(AuthContext)
}
return (
    <div>

        <ButtonLoadFoto/>


    </div>

)

as I said : if a render the image I can not have the information and viceversa... when I use dispatch I don t know I it brokes the image render

thanks in advance