TypeError: Cannot read property 'drizzleStore' of undefined

[DalderupMaurice]

I tried to use Drizzle-react but came upon several issues (which I was able to resolve). Although 1 issue I could not resolve which is the following (sceenshot): https://i.imgur.com/w7BFzOu.png

I followed the readme file, looked at the drizzle-trufflebox example but i could not find what I was doing wrong. Any help would be appreciated :)

My files:

const store = configureStore();
store.dispatch(loadItems());

// Set Drizzle options.
const options = {
  web3: {
    block: false,
    fallback: {
      type: 'ws',
      url: 'wss://ropsten.infura.io/ws'
    }
  },
  contracts: [
    CoinContract
  ],
  events: {
    Coin: ['Transfer']
  }
};

ReactDOM.render(
  <DrizzleProvider options={options}>
    <Provider store={store}>
      <App/>
    </Provider>
  </DrizzleProvider>
  , document.getElementById('root'));
registerServiceWorker();

container:

import React, {Component} from 'react';
import {Button} from "antd";
import PropTypes from "prop-types";
import * as exampleActions from "../../redux/actions/exampleActions";
import {bindActionCreators} from "redux";
import {drizzleConnect} from "drizzle-react";

class ExamplePage extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>
// jsx here, irrelevant for the issue
      </React.Fragment>
    );
  }
}

ExamplePage.propTypes = {
  items: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    items: state.items
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(exampleActions, dispatch)
  }
}

export default drizzleConnect(mapStateToProps, mapDispatchToProps)(ExamplePage);

Now, I have found that it has to do with this line: export default drizzleConnect(mapStateToProps, mapDispatchToProps)(ExamplePage);

But I don't know how else I can bind my dispatch actions to my props.

[Aare-]

I had similar issue and made it work after changing: export default drizzleConnect(mapStateToProps, mapDispatchToProps)(ExamplePage); to export default drizzleConnect(ExamplePage, mapStateToProps, mapDispatchToProps); Hope this helps

[DalderupMaurice]

Done it, now my initialState isn't persisted to my props anymore. It shows state being returned in my reducer, but in my container it's props, it is undefined. Referencing to line 35 here 'items' is undefined : https://github.com/DalderupMaurice/web3.js-snippets/blob/feature/drizzle-implementation/client/src/containers/example/examplePage.js

[DalderupMaurice]

I really have troubles to get this setup working.

• WebSocket connection to 'ws://127.0.0.1:8545/' failed: Connection closed before receiving a handshake response --> Ganache CLI is running, but unable to connect to the ws (8546 doesn't work either)
• My normal state (outside of the drizzle state) is not persisted onto my props

And if I try the drizzle-truffle box it's also forever stuck on the loading screen..

I'd really appreciate some help @Aare-

[abustamam]

Drizzle does not appear to work well with an existing Redux store, up until the latest release a week ago!

http://truffleframework.com/docs/drizzle/using-an-existing-redux-store

Note that the docs seem to be missing the fact that you still do indeed require Redux's native Provider.

[DalderupMaurice]

Thanks for the follow-up! I'll have a try later this week if I can figure it out :)

[cosmicapotheosis]

@DalderupMaurice Did you end up figuring this out? Is the link above about using an existing store accurate?

[DalderupMaurice]

Nope @cosmicapotheosis It's completely unreliable

[DalderupMaurice]

I've figured some things out - but got the following issue Actions must be plain objects. Use custom middleware for async actions.

I tried to integrating Drizzle with an existing redux store (which is using Thunk) and my actions do not contain any async functions/returns (Literally tried to just dispatch a character).

Pretty sure this is an issue within drizzle itself as I do not have this issue when using

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HomePage);

Instead of - in which the error DOES occur when using the drizzleConnect

export default drizzleConnect(HomePage, mapStateToProps, mapDispatchToProps)

[adrianmcli]

Closing for inactivity. It's recommended to use the new React Context API instead of drizzleConnect.