First, I have my state variable
export const state: State = {
assetPricesInUsd: {
BTC: '20000',
},
supportedAssets: [],
appLoading: true
}
and of course my overmind config as follows:
export const config = merge(
{
state,
actions,
effects,
},
namespaced({
swap,
send,
receive,
wallet,
}),
)
And inside my _app.tsx, since I am using NextJS, I create my app with the Overmind provider as so:
import { config } from '../lib/overmind'
const overmind = createOvermind(config)
function MyApp({ Component, pageProps }: AppProps) {
return (
<OvermindProvider value={overmind}>
<div data-theme='forest'>
<Navbar />
<Component {...pageProps} />
<Toaster position='top-center' />
</div>
</OvermindProvider>
)
}
export default MyApp
And as a super simple example, I created an 'appLoading' property of my state (as seen above) which initializes to true and is set to false at the end of onInitializeOvermind
export const onInitializeOvermind = async ({
effects,
actions,
state,
}: Context) => {
await actions.loadSupportedAssets()
await actions.loadAssetPrices(state.supportedAssets)
console.log('finished initializing')
state.appLoading = false
}
And in my index.tsx page route, I would like the page to respond to the state.appLoading changing like so:
import { useAppState } from 'lib/overmind'
const Home: NextPage = () => {
const { appLoading } = useAppState()
if (appLoading) {
console.log('app is loading')
return <div>loading...</div>
}
return (
<>
<Head>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className='min-h-screen bg-base grid grid-cols-8 font-Josefin'>
<Sidebar />
<Trade />
</main>
</>
)
}
export default Home
But in my app, <div>Loading...</div> is rendered on initial load, but it is not updated when I set state.appLoading to false.
In the devtools, appLoading is set to true, and the 'finished initializing' is printed to the console, but the page does not rerender.
Am I doing something wrong with accessing the state variable in my Home component, because it seems that the state is not linked to my component, and overmind doesn't know to re-render it?
Edit: There isn’t an issue with creating action/state hooks. My app state changes with actions like state.appLoading, and if I interact with a component THEN its state updates, but if I log in through the Navbar (updating the isConnected state) then the Sidebar component, which uses the isComponent property from the useState hook, doesn’t rerender until I change something about its own internal state.
Edit 2: I made a sample app which highlights the issue I'm facing hosted here: https://github.com/MaxSpiro/example-overmind. This example confirms that the state is being updated, but what I found out is that the two components are not being rendered at first. Only when you change the internal state of the components (with the second button) do they begin to react to the global state of overmind changing.