Using Easy Peasy in Gatsby

Hello, im getting this error, im using gatsby 2.15.36 with a fresh new install using gatsby new command

Uncaught Error: An error occurred trying to map state in a useStoreState hook: Cannot read property 'getState' of undefined. at useStoreState (easy-peasy.esm.js:41)

[monotykamary]

I have a working setup with TypeScript which works well:

// src/store/models/counter.ts

import { action, Action, thunk, Thunk } from 'easy-peasy';

interface Counter {
  count: number,
  setCount: Action<Counter, number>
  asyncSetCount: Thunk<Counter, number>
}

const counter: Counter = {
  count: 0,

  setCount: action((state, payload) => {
    state.count = payload;
  }),

  asyncSetCount: thunk(async (actions, payload) => {
    await actions.setCount(payload);
  }),
};

export default counter;

// src/store/index.ts

import { createStore, createTypedHooks } from 'easy-peasy';
import counter from './models/counter';

export const models = {
  counter,
};

export const {
  useStore,
  useStoreState,
  useStoreActions,
  useStoreDispatch,
} = createTypedHooks<typeof models>();

export default createStore(models);

// wrapWithProvider.js

import React from 'react';
import PropTypes from 'prop-types';
import { StoreProvider } from 'easy-peasy';
import store from './src/store';

const wrapWithProvider = ({ element }) => (
  <StoreProvider store={store}>
    {element}
  </StoreProvider>
);

wrapWithProvider.propTypes = {
  element: PropTypes.node.isRequired,
};

export default wrapWithProvider;

// gatsby-ssr.js
// gatsby-browser.js

import wrapWithProvider from './wrapWithProvider';

export const wrapRootElement = wrapWithProvider;

[ctrlplusb]

Hey @wrtisans

I have yet to use Gatsby myself, but in terms of configuring the StoreProvider you would need to follow a similar strategy as if you were implementing a standard react-redux Provider. The Gatsby repo has an example you can reference:

https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux