Привет, я использую шаблон trufflebox react-auth-box . Создал новый компонент, Foo
где я пытаюсь получить доступ к web3
объекту, который был сопоставлен из Store в this.props
.
Однако console.log(this.props.web3)
показывает {web3Instance: null}
. Что нам делать?
источник/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);
источник/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')
)
Ваше ReactDOM.render
происходит раньше, чем getWeb3
делается.
использовать ваши store
действия, dispatch
такие как
{
type: WEB3_LOADED,
payload: results
}
и добавьте редуктор web3
, который вводит действие payload
в state
asweb3
const reducer = (state = { web3: null }, action) => {
switch(action.type) {
case WEB3_LOADED: return { web3: action.payload }
default: return state
}
}