注意:前端单页面应用,就是把状态和路由连起来,同时注意嵌套 class App extends Component { render() { return( <div> {this.props.children} </div> ) } } let routes = ( <Route component={App}> <Route component={Public}> <Route path="/" component={index}/> <Route path="/carDetail" component={carDetail}/> <Route path="/useCarLogin" component={useCarLogin}/> <Route path="/useCarCheck" component={useCarCheck}/> <Route path="/faultMessage" component={faultMessage}/> <Route path="/feelMessage" component={feelMessage}/> <Route path="/subscribeOrder" component={subscribeOrder} /> <Route path="/shareOrder" component={shareOrder} /> <Route path="/withdrawOrder" component={withdrawOrder} /> <Route path="/userLogin" component={userLogin} /> <Route path="/userManager" component={userManager} /> <Route path="/logoDetail" component={logoDetail} /> </Route> <Route path="*" component={NotFound} /> </Route> ) ReactDOM.render( <Provider store={store}> <div> <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory} children={routes}></Router> </div> </Provider>, document.getElementById('app') ) document.body.removeChild(document.getElementById('svganimate')); 一、React-Redux 将所有组件分成两大类:UI 组件 和 容器组件 1、UI 组件:负责 UI 的呈现,即 UI 本身、接收数据和派发行为,由用户提供。 2、容器组件:负责管理数据和业务逻辑,由 React-Redux 自动生成。 二、容器组件 LastList 的构成 1、UI组件StartList的定义 class StartList extends Component { render() { const { openDialogue, detail } = this.props;//closeDialogue 和 close没有被解构赋值 //this.props包含3部分:(1)mapStateToProps遍历的内容(2)mapDispatchToProps遍历的内容(3)容器标签携带的内容 //如果mapDispatchToProps缺失,那么(2)将被dispatch取代。 return ( <div> <div>页面内容</div> <button onClick={ openDialogue }>{detail}</button> </div> <div> <div>弹窗内容</div> <button onClick={ this.props.closeDialogue }>{this.props.close}</button> </div> ) } } 2、mapStateToProps方法定义。负责输入逻辑,即将state映射到 UI 组件的参数(props), function mapStateToProps (state){ return { todos: state.todos//todos: getVisibleTodos(state.todos, state.visibilityFilter) } } 3、mapDispatchToProps方法定义。负责输出逻辑,即将用户对 UI 组件的操作映射成 Action。 const mapDispatchToProps = { closeDialogue: function(ownProps){ return { type: 'dialogue', filter: ownProps.filter } } } const mapDispatchToProps = { onClick: (ownProps) => { type: 'dialogue', filter: ownProps.filter }; } function mapDispatchToProps (dispatch, ownProps) {//ownProps(容器组件的props对象) return { openDialogue: function(){ //1、同步请求时,此处只有下面这些代码 //2、异步请求时,此处将 ownProps 里的部分数据作为参数,向后台发送请求,获取返回值 result,在成功的回调里执行下面这些代码 dispatch({ type: 'dialogue', isShow: true }); dispatch({ type: 'detail', data: result }); }, closeDialogue: function(){ dispatch({ type: 'dialogue', isShow: false }); }, }; } 4、容器组件LastList的定义。接收数据和派发行为,即把 mapStateToProps 和 mapDispatchToProps 传给 StartList 。 const LastList = connect( mapStateToProps, mapDispatchToProps )(StartList) <LastList detail="详情" close="关闭"/> //附:简单实例 class ProjectNumber extends Component { state = { visible: false }; showModal(){ const projectId = this.props.record.id; this.props.dispatch(getCarInfo(projectId)); this.setState({ visible: true, }); }; render() { return ( <div> <span onClick={this.showModal.bind(this)}>{this.props.record}</span> <Modal visible={this.state.visible}></Modal> </div> ); } }
220、react-redux,把redux状态和React-Router路由连起来
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/13392409.html
今日推荐
周排行