Can't seem to hook this up to gatsby

[andru]

Using the standard way of connecting Gatsby to Redux doesn't work with the easy-peasy provider.

useStore and useAction work in the sense that you can see actions and state changes in Redux DevTools, but the App component tree never gets updated.

I think it's possibly because Gatsby uses reach-router, so the wrapRootElement API which is usually used to add providers to the tree passes an element and not the root component?

Any thoughts on how to hook easy-peasy up to Gatsby without falling back to the react-redux provider and connect methods (and losing out on useStore/useAction)

[andru]

After some more digging, looks like this is due to gaearon/react-hot-loader#1088 so feel free to close.

For anyone coming across this before a fix is released for react hot loader, add this to the component file of any functional components:

import { setConfig } from 'react-hot-loader';
setConfig({ pureSFC: true });

[andru]

https://github.com/jlengstorf/gatsby-with-hooks

[ctrlplusb]

Glad you found a solution, and thanks for reporting back. 👍❤️

[vemundeldegard]

This doesn't seem to work. I am adding the fix for react-hot-loader. I am pretty stuck because I love Easy-Peasy.

TypeError: store.getState is not a function
useStore
node_modules/easy-peasy/dist/easy-peasy.esm.js:561
558 |
559 | var store = useContext(StoreContext);
560 |

561 | var _useState = useState(mapState(store.getState())),
562 | state = _useState[0],
563 | setState = _useState[1]; // As our effect only fires on mount and unmount it won't have the state
564 | // changes visible to it, therefore we use a mutable ref to track this.
View compiled
_default
src/pages/item.js:6
3 | import { setConfig } from 'react-hot-loader';
4 | setConfig({ pureSFC: true });
5 | export default () => {
6 | const loading = useStore(state => state.loading.state)
7 | if(loading)
8 | return (
9 |

Is loading

View compiled
▶ 24 stack frames were collapsed.
(anonymous function)
/Users/vemundeldegard/hello-world/.cache/app.js:56
53 | const preferDefault = m => (m && m.default) || m
54 | let Root = preferDefault(require(./root))
55 | domReady(() => {
56 | renderer(, rootElement, () => {
57 | postInitialRenderWork()
58 | apiRunner(onInitialClientRender)
59 | })
View compiled