Redux 和 react-router 正确设置
Redux and react-router proper setup
我是 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)
我目前得到的只是一个警告:
Uncaught Error: Could not find "store" in either the context or props
of "Connect(ClientsSubMenuContainer)". Either wrap the root component
in a , or explicitly pass "store" as a prop to
"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>
我是 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)
我目前得到的只是一个警告:
Uncaught Error: Could not find "store" in either the context or props of "Connect(ClientsSubMenuContainer)". Either wrap the root component in a , or explicitly pass "store" as a prop to "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>