码迷,mamicode.com
首页 > 其他好文 > 详细

React+router和react+redux使用过程的记录

时间:2017-10-19 16:58:49      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:ade   test   sub   pat   function   str   font   console   绑定   

1、集成react+redux的场景。

在不同的路由页面下,控制公共的头部显示和隐藏等功能。因为路由和Header之间不是直接的父组件和子组件的关系,所以通过pros传参满足不了。这个时候引入redux共享state(redux的state和component里的state毫无关系http://www.jianshu.com/p/8287a1dd8ae9)

redux包含三个主要文件action.js主要通过常量定义操作方法;reduer.js主要描述action对应的方法具体操作。Store将state和reduer关联起来。

2、操作流程

app.js里面创建store(store = createStore(todoApp))后

在对应的组件页面注入state和dispatch到props。这样在组件里就可以直接进行调用action里面对应的方法(原始:使用this.props.dispatch(action);bindActionCreators绑定后用此方法:this.props.showHeader({showHeader:false}))。

function mapStateToProps(state){

return {

header:state.header,

}

}

 

function mapDispatchToProps(dispatch){

return bindActionCreators({showHeader},dispatch)

}

 

module.exports = connect(mapStateToProps, mapDispatchToProps)(IndexShow);

 

通过dispatch调用reducer里面就可以修改state。这样注入到其他component里面的state参数也能进行相应的修改。

 

注意点:

1、Export时如果有header参数则,state的key就是header,否则是showHeaderName

 

2、监控state的变化时调用此方法监控store写在单独文件导出。

let unsubscribe = store.subscribe(() => {

  let newState = store.getState() // 获取更新后最新的state

    console.log(newState)

//   component.setState(...) // 这里的component可以是this

})

React+router和react+redux使用过程的记录

标签:ade   test   sub   pat   function   str   font   console   绑定   

原文地址:http://www.cnblogs.com/hehedaa/p/7693411.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!