How to integrate Drizzle with react

Question

I have currently set up a truffle project with react, redux and react-router. I just finished writing my first implementation of the smart contract, and now want redux to connect with the smart contract. I have tried reading up on several pages, including this: https://truffleframework.com/docs/drizzle/getting-started/using-an-existing-redux-store

However, I cant seem to figure this out. I have now set up my store as follows:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
import ItemList from "./utils/getItems";

//drizzle
import { generateContractsInitialState } from "drizzle";
import ItemOwnershipContract from "./contracts/ItemOwnership.json";


export default function configureStore() {
const options = {
    contracts: [
      ItemOwnershipContract
    ]
  }
const initialState = {
    contracts: generateContractsInitialState(options),
    account: "1",
    items: new ItemList().itemList,
    equipSelector: "0",
    raritySelector: "0",
    chosenItems: [-1, -1, -1]

}

const enhancers = applyMiddleware(thunk) && 
    (window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
return createStore(
    rootReducer,
    initialState,
     enhancers
);
}

(appologies for the indentation).

How do I now do the following:

1. Get account address from current user?

2. Do I still need to use web3 to see if I have connection with the given blockchain?

3. Will this automatically update the store whenever the content of the smart contract gets updated? Or do I need to force update it?

4. In that article, they simply call generateContractsInitialState() on "./drizzleOptions", but never shows us the file. What will it contain? A way struct with the contracts array field, and passed in a json file?

5. do drizzle store my current account address, or do I need to use web3 to fetch that?

I am aware there is a lot of questions here, but I am not very familiar with any of these tools, so I dont quite understand it. Thank you in advance!

Answer 1

I was able to understand Drizzle better after I looked this example code.

The app is built using the Drizzle box from the TruffleSuite. Drizzle is a "collection of front end libraries" which allow for easy integration with React, Redux, and Web3 functionality in communicating with ethereum smart contracts.

https://github.com/tobyjaguar/TobyToken

Answer 2

I also recommend reviewing Truffle's drizzle box, as an up to date example of integrating with drizzle.

Drizzle is a state manager implemented in Redux that will handle loading web3 and will sync the currently selected address of the web3 provider. It will also sync contract state for registered contracts by automatically scanning transactions for contract updates in newly mined blocks.

generateContractsInitialState is called internally when a contract is registered with Drizzle and should not be invoked directly.

Two resources for your consideration:

1. Overview of drizzle and its related products
2. Contract event Tutorial that makes use of the drizzle box