trufflesuite / drizzle-react-legacy Goto Github PK

Hi drizzle-react team,

I have just submitted a PR on drizzle-react-components to provide an implementation compatible with the v16.3+ API documented here (the existing implementations use the legacy standard).

However, the maintainer for that repository has not updated anything for a month now -- there is an ever growing list of PRs and issues going unresolved. Do you have any way of contacting them or adding a few more people to maintain the library?

I'm using the follow DrizzleContext Provider and Consumer objects in my DApp code:
Provider::

<DrizzleContext.Provider drizzle={drizzle}>
                <App />
</DrizzleContext.Provider>

Consumer::

export default () => (
    <DrizzleContext.Consumer>
        {(drizzleContext) => {
....
....
}

I'm deriving context object in some components as such:

class Header extends React.Component {
    static contextType = DrizzleContext.Consumer;

    constructor(props, context) {
        super(props);
        this.context = context;
  }

Recently it has started throwing the following warning:
Warning: MyComponent defines an invalid contextType. contextType should point to the Context object returned by React.createContext(). Did you accidentally pass the Context.Consumer instead?

Any ideas how to deal with this? please mention if possible the right way to get context object in Components. Tx.

As the title indicates, I am looking to understand why the drizzleReactHooks does not update drizzle when a metamask address change is made. I am using an effect that if it detects a change in this address it triggers a redux dispatch to store the address value:

useEffect(function selectAccountEffect() {
if (drizzle.drizzle.web3.eth.accounts.givenProvider.selectedAddress) {
selectAccount(drizzle.drizzle.web3.eth.accounts.givenProvider.selectedAddress);
}
},[drizzle.drizzle.web3.eth.accounts.givenProvider.selectedAddress]);

Is there anything I am doing wrong here or might this be a bug? Other effects, that depend on drizzleState for instance, trigger accordingly without issue.

On another aspect, is an update being released soon or is development expected to speed up? The whole drizzle project is great, but unfortunately it seems maintenance has really gone down. Perhaps looking to deprecate pre Context API React would be the way, giving full support to Hooks, and speeding up the ability to maintain compatibility between different drizzle projects?

Thanks!

No. 4 in the "Getting Started" section of the README.md (https://github.com/trufflesuite/drizzle-react#getting-started) says

"Wrap your components using the drizzleConnect function. It has the same API as the connect() function in react-redux"

This is misleading. connect() has the api

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

that returns a wrapper function that you then pass the component class you would like to wrap to. This follows the "enhancers" pattern (https://reactjs.org/docs/higher-order-components.html#convention-maximizing-composability) where the HOC returns a function that has a signature like Component => Component. This allows one to easily compose multiple enhancer HOC's with something like redux's compose function.

On the other hand, drizzleConnect accepts the Component as the first argument, which is a slightly different API.

I'm using the last code of develop branch and I'm having this error:

TypeError: Cannot read property 'drizzle' of undefined
useDrizzleState
C:/Users/Lenovo/develop/protofire/client/node_modules/drizzle-react/dist/drizzle-react.js:510
  507 | 
  508 | var useDrizzleState = function useDrizzleState(mapState, args) {
  509 |   var _useDrizzle = useDrizzle(),
> 510 |       drizzle = _useDrizzle.drizzle; // We keep a ref to `mapState` and always update it to avoid having a closure over it in the subscription that would make changes to it not have effect.
      | ^  511 | 
  512 | 
  513 |   var mapStateRef = Object(__WEBPACK_IMPORTED_MODULE_0_react__["useRef"])(mapState);

my code is like so:

import { drizzleReactHooks, DrizzleProvider } from 'drizzle-react';

import drizzleOptions from './config.drizzle';
import App from './containers/App';

ReactDOM.render(
  <DrizzleProvider options={drizzleOptions}>
    <drizzleReactHooks.Initializer
      error="There was an error."
      loadingContractsAndAccounts="Also still loading."
      loadingWeb3="Still loading."
    >
      <App />
    </drizzleReactHooks.Initializer>
  </DrizzleProvider>,
  document.getElementById('root')
);

Using only DrizzleProvider works fine.

I want to create an react/drizzle app that can deploy/call contracts on 2 different web3 providers eg. A local private network and metamask. An example use case would be a statechannel where the app would deploy contracts to both the mainnet and the private chain. State updates would take place on the private chain, passing these updates between participants for countersignature, then at some point the latest state would be flushed back to mainnet.

Is there any way to do this?

As a first attempt I altered the drizzle options to allow me to directly inject a web3 provider. I then made two drizzle instances, each with their own store, these worked well and I was able to observe changes in them due to transactions issued on both networks. The problem I encountered was connecting components to the store via react-redux, which only expects there to be one store per application.

Any ideas? And should I be asking this in the drizzle repo, rather than drizzle-react?

Hi

The version of React bundled with drizzle-react (16.4.2) has been released on August 2018. Since then, a lot updates have been released (bug fixed, improvement, new features).

Is there any reason to keep using an older version of react drizzle-react?

Thanks

According to the README.md, drizzle.contracts can be retrieved for the constructor of React.Component, like below

    constructor(props, context) {
        super(props)
        console.log("Loading test", context)
    }

However, I wrote the jsx code like this, the context in DrizzleProvider and HomeContainer prints out undefined.

ReactDOM.render(
    <DrizzleProvider options={options}>
        <Provider store={store}>
            <LoadingContainer>
                <Router history={history}>
                    <Route path="/" component={App}>
                        <IndexRoute component={LoginForKPCContainer} />
                    </Route>
                </Router>
            </LoadingContainer>
        </Provider>
    </DrizzleProvider>,
    document.getElementById('root')
);

Did I make some mistake? Anyone can help?

I've intergrated an ERC223 contract into a drizzle box project, I am now trying to send a transfer cacheSend however if I send 2 param or 3 param it still gives the same error

As far as I can tell, there is no way to get Drizzle's internal current block number. In general, there's no system in Drizzle for caching web3.eth functions -- only direct contract calls. As a result, my app would call the regular getBlockNumber constantly. Turns out half my app's eth data usage is this getBlockNumber call

It's simple enough for me to implement a cache myself, but this would ideally be part of Drizzle

I am not familiar with the npm publishing process, but I have noticed that all of the drizzle packages on npm are published with a single minified js file. This has made it very inconvenient and sometimes difficult to debug things. Exceptions caught by drizzle are unreadable and tools like React Dev Tools do not show the actual component names.

I am calling vote method in Contract Form

<ContractForm contract="LCSToken" method="vote" labels={['NFT Token ID','Positive?']} />

and the second argument always receive FALSE as a value, so the voting result is negative
There is my contract method :

 function vote(uint256 _id, bool _positive) public {
        require(_id != uint256(0));
        require(_id == voters[msg.sender]);
        require(extensions[_id].status == uint8(Status.Claim));
        Request storage _request = requests[_id];
        uint votingEnd = _request.timeStamp + _request.duration;
        require(votingEnd >= now);

        if(_positive) {
            _request.positive++;
        } else {
            _request.negative++;
        }
        delete voters[msg.sender]; // deliting prevent the second time voting
        // emit event
        Vote(msg.sender, _id, _positive);
    }

When I am setting the reference to the contracts in the constructor like this:
constructor(props, context) { super(props) this.contracts = context.drizzle.contracts }

and then trying to accessing contract data in the render() function like below, I alway get the error message of "initializeDrizzle TypeError: this.contracts.SimpleStorage.methods.storedData.data is not a function"
var storedData = this.props.drizzleStatus.initialized ? this.contracts.SimpleStorage.methods.storedData.data() : 'Loading...'

Whats the correct way to access data in the render() method?

Since #28, we have a new way of using Drizzle with React that IMO is much better and provides a lot more transparency. However, I'm still struggling with having enough bandwidth to update the README for this. The description under the PR (link above) is a great start.

Is drizzle-react compatible with react-native? I've been able to get truffle working with react-native but not sure if Drizzle will work.

I am getting this error: "uncaught at initializeDrizzle TypeError: Cannot read property 'apply' of undefined" while trying to start up my drizzle app.

The contract ABI is getting passed in successfully and I have made sure the contract is referenced in Drizzle Options. I'm baffled as to why this is happening. Please advise. I can provide any other info as necessary

Hi,

Is there a reason why we're using an old version of react?

May we update the react from "react": "^15.4.2" to "react": "16.3.1"?

I'm trying to build a simple dapp using drizzle-react's 'DrizzleContext'. This is how my index.js file looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import { Drizzle, generateStore } from "drizzle";
import { DrizzleContext } from "drizzle-react";
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} >
        <App />
    </DrizzleContext.Provider>), document.getElementById('root'));

Also, this is how my < App / > component looks like:

import React from "react";
import { DrizzleContext } from "drizzle-react";

    export default () => (
        <DrizzleContext.Consumer>
            {drizzleContext => {
                const { drizzle, drizzleState, initialized } = drizzleContext;

                if (!initialized) {
                    return "Loading...";
                }

                console.log("value of initialized: ");
                console.log(initialized);

                return (
                    <div>hello world</div>
                );
            }}
        </DrizzleContext.Consumer>
    )

turns out that using < DrizzleContext.Consumer > tag starts re-rendering the complete state infinitely, as is evident in the console log where all the mentioned logs keep repeating. Is this normal behavior ? Is there a way we can arrest this infinite re-render inside a Functional Component ?

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.

Hey team,

Would anyone be able to point me in the right direction to begin debugging this issue. I understand that this is now a legacy codebase so support is likely limited.

My standard deploy process is to migrate contracts to ganache, which places the resulting contract artifacts in my app src directory where drizzle then imports them from drizzle-setup.js.

When migrating to ropsten on infura, web3 initialization is successful, but the contracts fail to initialize. Redux store shows the initialized var is false for both contracts.

Very much appreciate any guidance on debugging this.

Package versions:
Drizzle: 1.3.3
drizzle-react: 1.3.0
Truffle v5.0.31 (core: 5.0.31)
Solidity - 0.5.0 (solc-js)
Node v10.16.3

Hello,
I a new user of drizzle and I installed the truffle drizzle box. Everything's OK.

But when I try to use <DrizzleContext.Provider drizzle={drizzle}>
following the example listed in the readme file of this module,
I keep on getting this error "TypeError: Cannot read property 'Provider' of undefined"

Here is the code I use:

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import drizzleOptions from './Options'
import { Drizzle, generateStore } from "drizzle";
import { DrizzleContext } from "drizzle-react";
import App from './layouts/home/App'
const drizzleStore = generateStore(drizzleOptions);
const drizzle = new Drizzle(drizzleOptions, drizzleStore);

ReactDOM.render((
<DrizzleContext.Provider drizzle={drizzle}>

</DrizzleContext.Provider>
),
document.getElementById('root')
);

The drizzle-react & drizzle packages are well installed and running with the drizzle truffle box. the react version is 16.7.0 so above the minimum version level as indicated in the readme file.

Is there any bug or am I lacking something?

Thanks a lot for your help/

Hi all,

I'm quite new to react and drizzle. I've just updated to the latest version of Drizzle and implemented the new Context.Consumer approach but I can't see a way of avoiding re-renders of my app when for my app irrelevant changes to the store happen. I'm still using reduxs connect and sharing the store of drizzle with my app so actually I wouldn't need any Context.Consumer rerenders at all, but I can't find a way to avoid this. Can anyone help me out?

In the legacy drizzleConnect, there was a way to differentiate between your dApp loading and if a web3 provider was completely missing. This was demonstrated in drizzle-react-components. With the new DrizzleContext, it seems we can only check if DrizzleContext is initialized. Is there a way to be able to show both a loading screen or a "No web3 provider" error page?

Thanks!

I am using the drizzle trufflebox and need to perform something using the web3 instance, like

this.props.web3.eth.getBalance(address)

Using this

const mapStateToProps = state => {
  return {
    drizzleStatus: state.drizzleStatus,
    web3: state.web3
  }
}

we are only able to get the status string from this.props.web3, not the web3 instance itself.

Any ideas on how we can expose/access the actual web3 instance?

In future versions of react, a context provider is paired with a context consumer. https://reactjs.org/docs/legacy-context.html shows how context works in react 16 while later versions will use a context consumer. Will this module be broken in future versions of react?

When installing npm install drizzle, this comes out:

Has anyone an idea how to fix these err one by one?

C:\Users\nedim\node_modules\scrypt>if not defined npm_config_node_gyp (node "C:\Users\nedim\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Users\nedim\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\nedim\AppData\Local\Programs\Python\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (child_process.js:276:12)
gyp ERR! stack at emitTwo (events.js:126:13)
gyp ERR! stack at ChildProcess.emit (events.js:214:7)
gyp ERR! stack at maybeClose (internal/child_process.js:915:16)
gyp ERR! stack at Socket.stream.socket.on (internal/child_process.js:336:11)
gyp ERR! stack at emitOne (events.js:116:13)
gyp ERR! stack at Socket.emit (events.js:211:7)
gyp ERR! stack at Pipe._handle.close [as _onclose] (net.js:561:12)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\Users\nedim\node.exe" "C:\Users\nedim\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\nedim\node_modules\scrypt
gyp ERR! node -v v8.12.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nedim\AppData\Roaming\npm-cache_logs\2018-09-24T08_38_29_548Z-debug.log

wrong repository sorry

In order to receive the context the component needs to declare that it's expecting the properties:

const App = function (props, context) {
  console.log(context.drizzle.contracts)
  return <div></div>
}

App.contextTypes = {
  drizzle: PropTypes.object,
  drizzleStore: PropTypes.object,
}

We could support the new React hooks proposal. It would look something like this:

import PropTypes from 'prop-types'
import React, { createContext, useContext, useState, useEffect } from 'react'

const Context = createContext()
export const useDrizzle = () => useContext(Context)

export const DrizzleProvider = ({ children, drizzle }) => {
  const [drizzleState, setDrizzleState] = useState()
  useEffect(
    () =>
      drizzle.store.subscribe(() => {
        const newDrizzleState = drizzle.store.getState()
        if (newDrizzleState.drizzleStatus.initialized)
          setDrizzleState(newDrizzleState)
      }),
    [drizzle]
  )
  return (
    <Context.Provider
      value={{
        drizzle: drizzle,
        drizzleState: drizzleState
      }}
    >
      {children}
    </Context.Provider>
  )
}

DrizzleProvider.propTypes = {
  children: PropTypes.node.isRequired,
  drizzle: PropTypes.shape({}).isRequired
}

This should be exported.

https://github.com/trufflesuite/drizzle-react/blob/5ce024822d74a9d7926f1182bedb51be42869bef/src/DrizzleContext.js#L3

It is useful for many things. Like React's new useContext hook for example.

Since we've migrated to using context over redux and React hooks make context way better, would this library be able to support React native 0.59.0?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

The pattern described at Using an Existing Redux Store is no longer possible with the new context API.

Is there a workaround?

I'm trying to find a way to use Drizzle in my own redux sagas while also using DrizzleProvider but coming up short.

The problem is, how do I pass an instance of drizzle to my own sagas? It looks like DrizzleProvider creates its Drizzle instance in getChildContext, and there's no handy way to fish it back out.

A workaround might be to create a container component which fetches it from the context and then kicks off the root saga, but this feels a bit hacky. Perhaps it should be possible to supply an instance of Drizzle to the DrizzleProvider?

Simple Question I hope.

I am used to drizzle's old redux API with drizzleConnect and MapStateToProps and the like. With the Context API, how am I supposed to dispatch actions to update my drizzleState. I'm used to redux-thunk actions, so I added my reducers and thunk middleware to the store. Where would I go from there?

Also I have a App Component that looks like this:

export default class App extends Component<Props> {
   render() {  
    return (  
      <DrizzleContext.Consumer>  
        {drizzleContext => {  
          const { drizzle, drizzleState, initialized } = drizzleContext;  
          console.log(drizzleState);  
          <View style={[styles.container]}>  
            <Text>{initialized}</Text>  
            <TouchableOpacity></TouchableOpacity>  
          </View>;  
        }}  
      </DrizzleContext.Consumer>  
    );  
  }  
} 

The returned View inside the Consumer is not rendering, however anything outside the consumer will render.

Hello,

I've been pulling my hair for the last week and as I don't have any left now I figured I must ask for help.

I have a contract keeping track of a bunch of "goal-structs" stored in a public array, to retrieve a user's goal in the client I have created a function called getGoalsByOwner which returns an array of indexes of goals where the current user is owner of. To retrieve the goals I then loop over the index array and call the public getter for the goals array with each index (this is using the normal web3 calls, not cacheCalls).

How would you recommend I implement drizzle for this?
I've been trying to first get the indexes by a normal web3 call as they return a promise and then I get the goals using the indexes and drizzle's cacheCall flow, haven't really gotten it to work yet but is this a good way to go about it? Will Drizzle automatically re-render with the latest indexes if I add a goal to the array this way?

Also, a lot of the times my app crashes and get stuck on "loading dapp..." when I try things out in the render function. All I get is a long long error message starting with uncaught at initializeDrizzle render@http://localhost:3000/static/js/bundle.js:105725:12.
Is this supposed to happen? It makes it kind of hard to troubleshoot what I did wrong since the error is not very descriptive.

Hope someone can help me out :)

The Loading.js example in the readme file has this condition:

    if (this.props.web3.status === 'failed')
    {
      return(
        // Display a web3 warning.
        <main>
          <h1>⚠️</h1>
          <p>This browser has no connection to the Ethereum network. Please use the Chrome/FireFox extension MetaMask, or dedicated Ethereum browsers Mist or Parity.</p>
        </main>
      )
    }

But it never show this, I even check with opera browser and at the beginning of page loading web3.status is '', then changes the value to 'initialized' and of course web3.network is undefined, which should be the condition here?

Hi,
I have an issue. If I switch metamask to a different network (not where the contract is loaded) I get an error:

uncaught at root at root at contractsSaga at takeEvery at addContract at instantiateContract TypeError: Cannot read property 'address' of undefined

How can I catch this error and do not show an error in a console?

As per the readme it says I should be able to do

var storedData = this.props.drizzleStatus.initialized ? this.contracts.SimpleStorage.methods.storedData.data() : 'Loading...'

to get storedData value, but doing so gives an error:

uncaught at initializeDrizzle TypeError: _this.contracts.SimpleStorage.methods.storedData.data is not a function

How do I really get the data from the store?

Using the code showed in the tutorial DRIZZLE AND CONTRACT EVENTS I got this behavior:

It's seems that the EVENT_FIRED are replicated one per each contracts set up in the drizzle_options.js file.

The steps below are the test case used to reproduce and show the behavior:

• start from this repo drizzle-event-demo

• change the drizzle version in the package.json

    ...
    "drizzle": "^1.4.0",
    "drizzle-react": "^1.3.0",
     ...

• add to the contract ComplexStorage.sol an event test to emit

....
contract ComplexStorage {
    event StorageSet2(string _message);
     ...

..
constructor() public {
       StorageSet2("Not the same data stored successfully!");
       ...

• modify the drizzleOptions.js

  ...
  events: {
    SimpleStorage: ['StorageSet'],
    ComplexStorage: ["StorageSet2"],
  },
  ...

• compile , migrate and then run the DApp.

• submit a new value

The behavior:
after submitted a new value will appear two toasts as shown in the figure below while I was expecting just one Toast corrisponding to the single event triggered.
Actually drizzle fired the same event twice.

Is this behavior correct? If yes why?

I've noticed some problems updating components, It usually works but sometimes doesn't and updates all on the next operation.
I'm doing something wrong? do you have the same problem?

Find comment:
178d824

Everything has been done according to official docs.
But I've got an error.
I think it's because in https://github.com/trufflesuite/drizzle-react/blob/master/src/DrizzleProvider.js on line 29 there is no check whether web3 property exists on options object.

I have the following code:

import Token from './contracts/StandardToken.json';

export const drizzleOptions = {
    contracts: [Token],
};

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { DrizzleProvider } from 'drizzle-react';
import { initializeIcons } from '@uifabric/icons';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { store } from './store';
import { AppRouter } from './router';
import { unregister as unregisterServiceWorker } from './registerServiceWorker';
import { drizzleOptions } from './drizzleOptions';

import './index.css';

initializeIcons();

const withProvider = WrappedComponent => (
    <Fabric>
        <DrizzleProvider options={drizzleOptions}>
            <Provider store={store}>
                <WrappedComponent />
            </Provider>
        </DrizzleProvider>
    </Fabric>
);

ReactDOM.render(withProvider(AppRouter), document.getElementById('root'));
unregisterServiceWorker();

when setting up the store in index.js (as prescribed on https://truffleframework.com/tutorials/getting-started-with-drizzle-and-react) we create an options object with the contracts we want to listen to:

const options = { contracts: [MyStringStore] };
When I try to add multiple contracts in that array, I invariably get the following error:

index.js:1452 uncaught at root at root
at contractsSaga
at takeEvery
at addContract
at instantiateContract
TypeError: Cannot read property 'address' of undefined

Is it possible to connect the fetched values from drizzle to the state?

There are two components in the new drizzle tutorial ReadString.js and SetString.js. I would like to combine these two components that the value myString of the component ReadString.js is the value of an input filed (<input type='text' value={this.state.myString} onChange={this.onChange} />. After the value is changed and the form will be submitted the value should be written to the contract storage with cacheSend. The render function would look like this:

  render() {
    
    // get the contract state from drizzleState
    const { MyStringStore } = this.props.drizzleState.contracts;

    // using the saved `dataKey`, get the variable we're interested in
    const myString = MyStringStore.myString[this.state.dataKey];

    if (myString) {
      return (
        <div>
          <p>My stored string: {myString && myString.value}</p>
          <input
            type="text"
            name='myString'
            value={this.state.myString}  // How can I set this.state.mySring which was feteched with const myString = MyStringStore.myString[this.state.dataKey]; to this.state.myString. I can not use setState in the render function
            onChange={this.onChange}
          />
          <div>{this.getTxStatus()}</div>
        </div>
      );
    }
  }

My problem is that the value of myString is fetched in the render() function (const myString = MyStringStore.myString[this.state.dataKey];) and in the render() function it is not possible to call setState.

What is the recommended way to do this?