最近我学习react和redux,当我尝试根据是否有userID显示不同的模块时,会发生错误:
这是我如何初始化商店:
import React,{Children} from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import {BrowserRouter,Route} from 'react-router-dom';
import './index.css';
import App from './App';
import RootReducer from './reducers/index'
import registerServiceWorker from './registerServiceWorker';
const store = createStore(RootReducer);
ReactDOM.render(
<Provider store={{store}}>
<BrowserRouter>
<Route component={App} />
</BrowserRouter>
</Provider> ,
document.getElementById('root'));
registerServiceWorker();
这是我使用connect()生成容器的地方:
import React from 'react'
import {Dropdown,Button,Menu} from 'antd'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import logo from '../../logo.svg'
const menu = (
<Menu>
<Menu.Item>
<Link to='/home/accountInfo'>Account Information</Link>
</Menu.Item>
... //just some links, I think they are correct
</Menu>
);
const mapStateToProps= state=>{
return{
userID: state.userID
}
}
const mapDispatchToProps= dispatch=>{
return{}
}
const topBarIcon=function({userID=undefined}) {
if(userID)
return (
<div>
<Dropdown overlay={menu}>
<Link to='/home/accountInfo'>
<Button shape="circle" gost>
{JSON.stringify(userID)}
<img src={logo} alt='UserLogo' height="30" width="30"/>
</Button>
</Link>
</Dropdown>
</div>
);
return(
<div>
<Link to='/login'>
<Button type="primary" className="LoginButton">
Login
</Button>
</Link>
</div>
);
}
const TopBarIcon= connect(mapStateToProps,mapDispatchToProps())(topBarIcon)
export default TopBarIcon
我使用商店的方式应该与react-redux文档中的示例非常相似,而且我不确定哪个步骤是导致此类错误的原因。我尝试在props中声明调度而不是connect()参数,但错误仍然存在。
答案 0 :(得分:2)
它是<Provider store={store}>
您添加了一个额外的括号