0

i'm trying to create a drizzle-react app which uses the new DrizzleContext component but running the following error in my 'localhost:3000':

> Could not find "store" in either the context or props of "Connect(c)".
> Either wrap the root component in a <Provider>, or explicitly pass
> "store" as a prop to "Connect(c)"

my index.js looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Drizzle, generateStore } from "drizzle";
import { DrizzleContext } from "drizzle-react";
import { LoadingContainer } from 'drizzle-react-components'
import './index.css';
import App from './App';
//import * as serviceWorker from './serviceWorker';
import drizzleOptions from './drizzleOptions';

const drizzleStore = generateStore(drizzleOptions);
const drizzle = new Drizzle(drizzleOptions, drizzleStore);

ReactDOM.render(
    (<DrizzleContext.Provider drizzle={drizzle} >
        <LoadingContainer>
            <App />
        </LoadingContainer>
    </DrizzleContext.Provider>),
    document.getElementById('root')
);

I've tried keeping the drizzleOptions inline (a small default options object) but to no avail. The only thing i can think of is my drizzle related imports are having the warning:

could not find a declaration file for module 'drizzle' same goes for drizzle-react and drizzle-react-components

.. any help would be greatly appreciated. Thanks.

--MORE INFO UPDATED-- I tried to do some debugging and seems like the problem is in the 'generateStore' function of drizzle. the store object that is being returned is empty even though the drizzleOptions argument passed has correct values. Any pointers?

-- UPDATE -- 'generateStore' was not the issue. the store object remains empty by default for every dapp and has not populated values. The issue is something else.

  • Quick question, are you using the drizzle-box? That box has always been a little iffy when I tried it. For example, it took a long time for npm run test to work again. – GrandFleet Jan 14 at 5:44
  • no, not using drizzle-box but used create-react-app and then added drizzle, drizzle-react and drizzle-react-components via npm. Also like I have edited in the question: I tried to do some debugging and seems like the problem is in the 'generateStore' function of drizzle. the store object that is being returned is empty even though the drizzleOptions argument passed has correct values. Any pointers? – Kombo Jan 14 at 6:03
0

turns out the problem might be the 'LoadingContainer' component. I removed it and it started working. I believe the issue is that 'LoadingContainer' might be receiving the props correctly from DrizzleContext.Provider, but is not further injecting them into its children components (in this case < App / > ).

This further begs the question: can anyone please clarify how to receive the context sent from DrizzleContext.Provider into a "class" component? For a "function" component, i guess it is pretty straightforward - use < DrizzleContext.Consumer >. I tried giving a constructor with context prop like this:

constructor(prop, drizzleContext)

but it doesnt work. Any ideas ?

  • one can use this statement to get the context in class components : code MyClassComponent.contextType = DrizzleContext.Consumer; code – Kombo Jan 15 at 9:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.