Read and write to Redux store from multiple pages of a Gatsby App

Question

My app is like this:

Gatsby project

index.tsx - Entry point of app - I call

<Provider store={store}>
   <HomePage />
</Provider>

HomePage.js uses mapStateToProps and uses connect(mapStateToProps)(HomePage)

Inside my HomePage, of course I use multiple React components. And I can make use of the store, read/write of anything that happens on that HomePage.

On my Homepage, I have links to ActivityPage. Once I click on this page and land there - problem starts.

ActivityPage makes use of multiple sub-components to achieve tasks. How do I access read/write from ActivityPage?

I am unable to useDispatch to write or even read from the store. I can see the store on my ReactDev tools, but on trying to read/write I get 11 errors, mostly along the lines of I need to wrap Components with <Provider>

I read different solutions on Stack Overflow which suggested that I need to have mapStateToProps and use connect on whichever Component I need access the store.

This is not working, as I am specifically looking to get access to the store from a 'new page'. Do I need to go and make another store for my child pages? Help please. :

Answer 1

The answer posted already and the Freecodecamp link posted in the comment were both really helpful resources, however for my specific use case I found looking at the Gatsby repository on redux the most helpful": https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux

Also, I ended up realizing that sessionStorage was more appropriate for my use case as I was trying to store data beyond a page refresh and I wasn't using the other features Redux offered. You can read more about localStorage here: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage and the differences between Redux and local storage here: Why redux instead of session storage

Also if you're using Redux I highly reccomend the redux-devtools extension for debugging you can install the package here: https://www.npmjs.com/package/@redux-devtools/extension and the browser extension here: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en