Accediendo a Web3 en el cuadro de autenticación de reacción de trufflebox

Hola, estoy usando trufflebox repetitivo react-auth-box . Creé un nuevo componente llamado Foodonde intento acceder al web3objeto que se ha asignado desde Store a this.props.

Sin embargo, se console.log(this.props.web3)muestra {web3Instance: null}. ¿Qué debemos hacer?

src/Foo.js

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);

src/index.js

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.
getWeb3
.then(results => {
  console.log('Web3 initialized!')
})
.catch(() => {
  console.log('Error in web3 initialization.')
})

ReactDOM.render((
    <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} />
        </Route>
      </Router>
    </Provider>
  ),
  document.getElementById('root')
)

Respuestas (1)

Tu ReactDOM.renderestá sucediendo antes de que getWeb3termine.

usa tu storepara dispatchuna acción como

{
  type:  WEB3_LOADED,
  payload: results
}

y agregue un reductor llamado web3que inyecta la acción payloaden el statecomoweb3

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