Hello! I’m having a weird issue with Framework7 Reac, it’s useStore function and browserHistory active.
Pages in the “previous” history don’t seem to react to store changes. I created a small demo to reproduce the problem.
I have 2 pages: home and details. Both pages uses the same store. Details pages updates the store (with an async call). If I reload details page, the change is NOT reactive in the home page.
Home Page
export default function HomePage() {
const user = useStore("user");
return (
<Page name="home">
<Navbar>
<NavTitle>Home</NavTitle>
</Navbar>
<Block strong>
{user.name}
</Block>
<Button href="/details">Go to Details</Button>
</Page>
)
};
Details Page
export default function DetailsPage() {
const user = useStore("user");
return (
<Page name="details" onPageBeforeIn={() => store.dispatch("search")}>
<Navbar backLink>
<NavTitle>Details</NavTitle>
</Navbar>
<Block strong>
{user.name}
</Block>
</Page>
)
};
store
const store = createStore({
state: {
user: { name: "Loading user..." }
},
getters: {
user({ state }) {
return state.user;
}
},
actions: {
async search({ state }) {
const user = await searchInfo();
state.user = user;
}
}
})
async function searchInfo() {
const delay = ms => new Promise(res => setTimeout(res, ms));
await delay(1000);
return { name: "Invader Zim" };
}
export default store;
How to reproduce
- Download and unzip f7-useStore-problem.zip - Google Drive
- npm install
- npm start
- Open http://localhost:8082/#!/details
- Wait until the text “Loading user…” changes to “Invader Zim”
- Click the back icon in the navbar
- The text displays “Loading user…” instead of “Invader Zim”
Am I doing something wrong? Thanks for your help!