我是Redux的新手。尝试在当前项目中进行设置。
import thunk from 'redux-thunk'
import * as reducers from './store/reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(combineReducers(reducers), composeWithDevTools(
applyMiddleware(thunk)
))
使用提供者的路由方案:
<Router history={browserHistory}>
<Route path='/login' component={Login} />
<Provider store={store}>
<Route path='/' component={App} onEnter={auth}>
<Route path='/token' component={Token} />
<Route path='/engagement' component={Engagement} />
<Route path='/clients' component={Clients} />
</Route>
</Provider>
</Router>
我在<Clients />
组件中有一个基本的容器组件:
class Clients extends Component {
render () {
return (
<div className='any-css' >
<Row>
<ClientsSubMenuContainer someId={13} />
</Row>
</div>
)
}
}
我正在尝试与商店建立联系:
class ClientsSubMenuContainer extends Component {
render () {
return <ClientsSubMenu {...this.props} />
}
}
// which props do we want to inject, given the global store state?
function mapStateToProps (state) {
return {
}
}
export default connect(mapStateToProps)(ClientsSubMenuContainer)
而我目前得到的只是一个警告:
未捕获的错误:在“ Connect(ClientsSubMenuContainer)”的上下文或道具中找不到“存储”。可以将根组件包装在中,也可以将“存储”作为道具明确传递给“ Connect(ClientsSubMenuContainer)”。
如何正确设置此设置,以便所有组件(不包括登录名)都可以访问存储和所有redux功能?
1天后更新
,由于社区,我才发现问题的核心。index.js
初级用户对任何gitFlow残酷地添加了另一段代码:)我没有注意到它,因为完全确定可以保存master分支,而无需进行任何更改。这段代码看起来像这样:
let router = (
<Router history={browserHistory} onUpdate={onUpdate}>
{Routes}
</Router>
)
render(Routes, document.getElementById('app'))
所以最终结果是:
<Router history={browserHistory} onUpdate={onUpdate}>
<Provider store={store}>
<Router history={browserHistory}>
<Route path='/login' component={Login} />
<Route path='/' component={App} onEnter={auth}>
<Route path='/token' component={Token} />
<Route path='/engagement' component={Engagement} />
<Route path='/clients' component={Clients} />
</Route>
</Router>
</Provider>
</Router>
和路由器工作正常。唯一的提示是redux警告,该警告在移除包装后消失了<Router />
您可以尝试用提供程序包装所有组件吗?
<Provider store={store}>
<Router history={browserHistory}>
<Route path='/login' component={Login} />
<Route path='/' component={App} onEnter={auth}>
<Route path='/token' component={Token} />
<Route path='/engagement' component={Engagement} />
<Route path='/clients' component={Clients} />
</Route>
</Router>
</Provider>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句