Hola, estoy usando trufflebox repetitivo react-auth-box . Creé un nuevo componente llamado Foo
donde intento acceder al web3
objeto 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')
)
Tu ReactDOM.render
está sucediendo antes de que getWeb3
termine.
usa tu store
para dispatch
una acción como
{
type: WEB3_LOADED,
payload: results
}
y agregue un reductor llamado web3
que inyecta la acción payload
en el state
comoweb3
const reducer = (state = { web3: null }, action) => {
switch(action.type) {
case WEB3_LOADED: return { web3: action.payload }
default: return state
}
}