How to call a reusable function that uses yewdux store within use_effect hook?

169 Views Asked by At

I want to make a reusable function that uses yewdux store, and call it in use_effect of another component. As per hook rule, hooks can only be used in top level of a function / hook

use crate::components::accounts::account_store::PhraseStore;
use yew::prelude::*;
use yewdux::prelude::*;

#[derive(Clone)]
pub struct SignTx {
    pub sign_tx: (),
}

#[hook]
pub fn use_sign_tx<T>(tx: T) -> SignTx
{
    let (store, _) = use_store::<PhraseStore>();

    let sign_tx = {
        wasm_bindgen_futures::spawn_local(async move {
            // code logic using store
            // api calls 
        });       
    };
    SignTx { sign_tx }
}

Now I want to call sign_tx function in another component?

#[function_component(TransactionFromHooks)]
pub fn transaction() -> Html {
    let first_load = use_state(|| true);
    use_effect(move || {
        if *first_load {
            wasm_bindgen_futures::spawn_local(async move {
                
               // Call the sign_tx function here
               // let sign = use_sign_tx(tx);
                
            });
            first_load.set(false);
        }
        || {}
    });

    html! {
        <h1>{"Transaction"}</h1>
    }
}

How to do it?

0

There are 0 best solutions below