Working with External State

This guide will help you integrate your Dioxus application with some external state like a different thread or a websocket connection.

Working with non-reactive State

Coroutines are great tool for dealing with non-reactive (state you don't render directly) state within your application.

You can store your state inside the coroutine async block and communicate with the coroutine with messages from any child components.

// import futures::StreamExt to use the next() method
use futures::StreamExt;
let response_state = use_state(cx, || None);
let tx = use_coroutine(cx, |mut rx| {
    to_owned![response_state];
    async move {
        // Define your state before the loop
        let mut state = reqwest::Client::new();
        let mut cache: HashMap<String, String> = HashMap::new();
        loop {
            // Loop and wait for the next message
            if let Some(request) = rx.next().await {
                // Resolve the message
                let response = if let Some(response) = cache.get(&request) {
                    response.clone()
                } else {
                    let response = state
                        .get(&request)
                        .send()
                        .await
                        .unwrap()
                        .text()
                        .await
                        .unwrap();
                    cache.insert(request, response.clone());
                    response
                };
                response_state.set(Some(response));
            } else {
                break;
            }
        }
    }
});
// Send a message to the coroutine
tx.send("https://example.com".to_string());
// Get the current state of the coroutine
let response = response_state.get();

Making Reactive State External

If you have some reactive state (state that is rendered), that you want to modify from another thread, you can use the use_rw hook in the dioxus-std crate.

The use_rw hook works like the use_ref hook, but it is Send + Sync which makes it possible to move the hook into another thread.