How do I remove this compiler error for use_store with yewdux?

I am learning yewdux and have implemented the tutorial code for global state:

use yew::prelude::*;
use yewdux::prelude::*;

#[derive(Default, Clone, PartialEq, Eq, Store)]
struct State {
    count: u32,
}

#[function_component]
fn App() -> Html {
    let (state, dispatch) = use_store::<State>();
    let onclick = dispatch.reduce_mut_callback(|state| state.count += 1);

    html! {
        <>
        <p>{ state.count }</p>
        <button {onclick}>{"+1"}</button>
        </>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

However I am getting a compiler error for the line:

let (state, dispatch) = use_store::<State>();

The compiler error reads:

error[E0277]: the trait bound `impl yew::functional::hooks::Hook<Output = (Rc<State>, Dispatch<State>)>: Hook` is not satisfied
  --> src/main.rs:11:29
   |
11 |     let (state, dispatch) = use_store::<State>();
   |                             ---------^^^^^^^^^^^
   |                             |
   |                             the trait `Hook` is not implemented for `impl yew::functional::hooks::Hook<Output = (Rc<State>, Dispatch<State>)>`
   |                             required by a bound introduced by this call
   |
   = help: the trait `Hook` is implemented for `BoxedHook<'_, T>`

My Cargo.toml file is:

[package]
name = "yewdux_tutorial"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
stdweb = "0.4.20"
yewdux = "0.9.0"

Please could someone help point me in the right direction for solving this compiler error.

I have searched online for this this answer and found this question Failed to follow yew tutorial on Mac m1 - use of undeclared type `Vec` (Also on a mac m1) and followed the answer to no success.

I also attempted to manually implement a default Store on the State struct but that also did not fix it.

Solution

Try to add yew crate this way:

[dependencies]
yew = { version = "0.20", features = ["csr"] }
yewdux = "0.9"

When we did not specify yew by its source, we actually refer to the one in the official crate registry. But if we specify yew by its git repository, we refer to the crate at the default branch if no branch specified. The two crates are not the same in the eye of the Rust compiler.

The crate yewdux in the official crate registry probably also relies on the yew that is in the official crate registry as well, so we need to refer to yew in the official crate registry.

The file Cargo.lock shows more details about crate dependencies. If source = "registry+https://github.com/rust-lang/crates.io-index", then the crate is from the official crate registry. If source = "git+https://github.com/yewstack/yew.git#c40bd0b456f9c80146c99d56bc0b441c88c3fefe", then the crate is from the repo specified and the code version is at the commit c40bd0b456f9c80146c99d56bc0b441c88c3fefe.

Reference: https://intendednull.github.io/yewdux/setup.html#stable-release