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

Posted 2020-10-11

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

})