Hi I am using trufflebox boilerplate react-auth-box. Created a new component called Foo where I am trying to access the web3 object that has been mapped from Store to this.props.

However the console.log(this.props.web3) is showing {web3Instance: null}. What should we do?


import React, { Component } from 'react';
import { connect } from 'react-redux';

class Foo extends Component {

    componentWillMount() {
        console.log(this.props.web3)               // {web3Instance: null}

    render() {
        return ( <div>foo</div> )

function mapStateToProps(state) {
    return {
        web3: state.web3

export default connect(mapStateToProps)(Factory);


import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'
import { UserIsAuthenticated, UserIsNotAuthenticated } from './util/wrappers.js'
import getWeb3 from './util/web3/getWeb3'

// Layouts
import App from './App'
import Home from './layouts/home/Home'
import Dashboard from './layouts/dashboard/Dashboard'
import SignUp from './user/layouts/signup/SignUp'
import Profile from './user/layouts/profile/Profile'
import Foo from './Foo'

// Redux Store
import store from './store'

// Initialize react-router-redux.
const history = syncHistoryWithStore(browserHistory, store)

// Initialize web3 and set in Redux.
.then(results => {
  console.log('Web3 initialized!')
.catch(() => {
  console.log('Error in web3 initialization.')

    <Provider store={store}>
      <Router history={history}>
        <Route path="/" component={App}>
          <IndexRoute component={Home} />
          <Route path="dashboard" component={UserIsAuthenticated(Dashboard)} />
          <Route path="signup" component={UserIsNotAuthenticated(SignUp)} />
          <Route path="profile" component={UserIsAuthenticated(Profile)} />
          <Route path="foo" component={Foo} />

Your ReactDOM.render is happening before the getWeb3 is done.

use your store to dispatch an action such as

  type:  WEB3_LOADED,
  payload: results

and add a reducer called web3 that injects the action's payload into the state as web3

const reducer = (state = { web3: null }, action) => {
   switch(action.type) {
      case WEB3_LOADED: return { web3: action.payload }
      default: return state

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.