TOKEN_LOADED & EXCHANGE LOADED in not showing in Redux devtools

Question

Hi I was wondering if someone can assist me with getting my Redux dev tools to load the "TOKEN_LOADED & EXCHANGE LOADED" as per the images shown. I have copied and pased the code that was given to me. I have pasted the full code below. Thank you please. I copied and pasted the the original code at least 5 or more times into the App.js , index.js , interactions.js , reducers.js , and action.js files.

Can you please share with me if I am missing something? In the meanwhile, I will continue on in the project. I hope to hear from you soon.

Regards,

    **App.js file**

    import React, { Component } from 'react'
    import './App.css'
    import Navbar from './Navbar'
    import Content from './Content'
    import { connect } from 'react-redux'
    import {
      loadWeb3,
      loadAccount,
      loadToken,
      loadExchange
    } from '../store/interactions'
    import { contractsLoadedSelector } from '../store/selectors'
    
    class App extends Component {
      componentWillMount() {
        this.loadBlockchainData(this.props.dispatch)
      }
    
      async loadBlockchainData(dispatch) {
        const web3 = await loadWeb3(dispatch)
        const networkId = await web3.eth.net.getId()
        await loadAccount(web3, dispatch)
        const token = await loadToken(web3, networkId, dispatch)
        if(!token) {
          window.alert('Token smart contract not detected on the current network. Please select another network with Metamask.')
          return
        }
        const exchange = await loadExchange(web3, networkId, dispatch)
        if(!exchange) {
          window.alert('Exchange smart contract not detected on the current network. Please select another network with Metamask.')
          return
        }
      }
    
      render() {
        return (
          <div>
            <Navbar />
            { this.props.contractsLoaded ? <Content /> : <div className="content"></div> }
          </div>
        );
      }
    }
    
    function mapStateToProps(state) {
      return {
        contractsLoaded: contractsLoadedSelector(state)
      }
    }
    
    export default connect(mapStateToProps)(App)
    
    
   
    [Redux][1]
    
    
    [Redux 2][2]
    
    
      [1]: https://i.stack.imgur.com/NNJBq.jpg
      [2]: https://i.stack.imgur.com/xVaAu.jpg

Answer 1

I fixed the issue by doing the following:

1. Set Firefox as the default browser.

2. Install Metamask extension on firefox.

3. Create a new Metamask account.

4. Run 'npm run start' in your terminal. (it should open React in firefox).

5. Click on the 'Networks' tab, located to the left of your account picture. (metamask)

6. At the bottom of the dropdown menu select 'Add Network'.

7. Input the following:

   -Network Name: 'Ganache Local'

   -NEW RPC URL: HTTP://127.0.0.1:7545 (you will see this under 'RPC Server' at the top of your ganache app.

   -CHAIN ID: 1337

8. You can leave the last two sections blank.

9. Click 'Save'

10. Refresh your React app page.

Let me know if this worked for you.