React 实践心得:react-redux 之 connect 方法详解
Redux 是「React 全家桶」中极为重要的一员,它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单,除了 React,它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用,就还需要一些额外的工具,其中最重要的莫过于 react-redux 了。 react-redux 提供了两个重要的对象, 在使用了一段时间 redux 后,本文尝试再次回到这里,给这段文档一个靠谱的解读。 预备知识首先回顾一下 redux 的基本用法。如果你还没有阅读过 redux 的文档,你一定要先去阅读一下。 const reducer = (state = {count: 0},action) => { switch (action.type){ case 'INCREASE': return {count: state.count + 1}; case 'DECREASE': return {count: state.count - 1}; default: return state; } } const actions = { increase: () => ({type: 'INCREASE'}),decrease: () => ({type: 'DECREASE'}) } const store = createStore(reducer); store.subscribe(() => console.log(store.getState()) ); store.dispatch(actions.increase()) // {count: 1} store.dispatch(actions.increase()) // {count: 2} store.dispatch(actions.increase()) // {count: 3} 通过 我们当然可以直接在 React 中使用 Redux:在最外层容器组件中初始化 class App extends Component{ componentWillMount(){ store.subscribe((state)=>this.setState(state)) } render(){ return ( <Comp state={this.state} onIncrease={()=>store.dispatch(actions.increase())} onDecrease={()=>store.dispatch(actions.decrease())} /> ) } }
但这并不是最佳的方式。最佳的方式是使用 react-redux 提供的 使用 react-redux首先在最外层容器中,把所有内容包裹在 const App = () => { return ( <Provider store={store}> <Comp/> </Provider> ) };
class MyComp extends Component { // content... } const Comp = connect(...args)(MyComp); 可见, connect究竟 首先看下函数的签名: connect([mapStateToProps],[mapDispatchToProps],[mergeProps],[options])
mapStateToPropsmapStateToProps(state,ownProps) : stateProps 这个函数允许我们将 const mapStateToProps = (state) => { return { count: state.count } } 这个函数的第一个参数就是 Redux 的 class MyComp extends Component { render(){ return <div>计数:{this.props.count}次</div> } } const Comp = connect(...args)(MyComp); 当然,你不必将 const mapStateToProps = (state) => { return { greaterThanFive: state.count > 5 } } 函数的第二个参数 const mapStateToProps = (state,ownProps) => { // state 是 {userList: [{id: 0,name: '王二'}]} return { user: _.find(state.userList,{id: ownProps.userId}) } } class MyComp extends Component { static PropTypes = { userId: PropTypes.string.isRequired,user: PropTypes.object }; render(){ return <div>用户名:{this.props.user.name}</div> } } const Comp = connect(mapStateToProps)(MyComp); 当 这就是将 Redux
mapDispatchToPropsmapDispatchToProps(dispatch,ownProps): dispatchProps connect 的第二个参数是 const mapDispatchToProps = (dispatch,ownProps) => { return { increase: (...args) => dispatch(actions.increase(...args)),decrease: (...args) => dispatch(actions.decrease(...args)) } } class MyComp extends Component { render(){ const {count,increase,decrease} = this.props; return (<div> <div>计数:{this.props.count}次</div> <button onClick={increase}>增加</button> <button onClick={decrease}>减少</button> </div>) } } const Comp = connect(mapStateToProps, mapDispatchToProps)(MyComp); 由于 如上所示,调用 Redux 本身提供了 import {bindActionCreators} from 'redux'; const mapDispatchToProps = (dispatch,ownProps) => { return bindActionCreators({ increase: action.increase,decrease: action.decrease }); } 同样,当
mergeProps[mergeProps(stateProps,dispatchProps,ownProps): props] 之前说过,不管是 其他最后还有一个 (完) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Cocos2dx学习笔记34 使用tolua++编译pkg,从而创建自定义类
- objective-c – 通过引用传递布尔值
- C# 值类型和引用类型的区别
- Duanxx的STM32学习:报错 Flash Download Failed -Cortex-M
- SQLite虚表介绍
- .net – Inherit SortedDictionary – 这是一个很好的编程实
- ? Creating a Connection Pool to PostgreSQL on Glassfish
- c# – 为什么我的类将一个集合保存到数据库而不保存另一个集
- c# – 如何在Silverlight中的附加依赖项属性上设置TypeConv
- ruby-on-rails – Rails 4引导设置资产