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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React+router和react+redux使用过程的记录相关的知识,希望对你有一定的参考价值。

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使用过程的记录的主要内容,如果未能解决你的问题,请参考以下文章

React Redux 和 react-router-dom

react-router-redux 的“push”方法和 react-router 的“browserHistory”有啥区别?

如何用 redux 和 react-router 组织状态?

Redux 中的 React Router 路由参数

在 react + redux + react-router-redux 中导航到用户登录成功的主页

React-Router-Redux:在“react-router-redux”中找不到导出“syncHistoryWithStore”