Open hacker0limbo opened 5 years ago
以下代码均以计数器为例.
connect方法不加第二个参数, 默认会将dispatch传入至组件的props
connect
dispatch
props
// drecement 是一个 action creator const decrement = (id) => { return { type: "DECREMENT", id } } const App = props => { const { counter, dispatch } = props return ( <div> <span></span> <button onClick={() => dispatch({ type: "INCREMENT" })}></button> <button onClick={() => dispatch(decrement(1))}></button> </div> ) } const mapStateToProps = state => { return { counter: state.counter } } export default connect(mapStateToProps)(App)
使用mapDispatchToProps, 此时dispatch方法不会再被传入到组件的props中, 取而代之的传入的是一个对象(类似mapStateToProps), 对象里面包含所有可以 dispatch一个action的函数
mapDispatchToProps
mapStateToProps
action
// drecement 是一个 action creator const decrement = id => { return { type: "DECREMENT", id } } const App = props => { const { counter, increment, decrement } = props return ( <div> <span></span> <button onClick={() => increment()}></button> <button onClick={() => decrement(1)}></button> </div> ) } const mapStateToProps = state => { return { counter: state.counter } } const mapDispatchToProps = dispatch => { return { increment: () => dispatch({ type: "INCREMENT" }), decrement: (id) => dispatch(decrement(id)) } } export default connect(mapStateToProps, mapDispatchToProps)(App)
使用bindAcionCreator, 相比方法二, 无需编写一系列函数.
bindAcionCreator
注意, 需要将action写成action creator形式, 即函数形式
action creator
import { bindAcionCreator } from 'redux' const increment = () => { return { type: "INCREMENT", } } // drecement 是一个 action creator const decrement = id => { return { type: "DECREMENT", id } } const App = props => { const { counter, increment, decrement } = props return ( <div> <span></span> <button onClick={() => increment()}></button> <button onClick={() => decrement(1)}></button> </div> ) } const mapStateToProps = state => { return { counter: state.counter } } const mapDispatchToProps = dispatch => { return bindActionCreator({ increment, decrement }, dispatch) } export default connect(mapStateToProps, mapDispatchToProps)(App)
将mapDispatchToProps定义为一个对象
const increment = () => { return { type: "INCREMENT", id } } // drecement 是一个 action creator const decrement = id => { return { type: "DECREMENT", id } } const App = props => { const { counter, increment, decrement } = props return ( <div> <span></span> <button onClick={() => increment()}></button> <button onClick={() => decrement(1)}></button> </div> ) } const mapStateToProps = state => { return { counter: state.counter } } export default connect(mapStateToProps, { increment, decrement })(App)
方法四存在的问题是, 如果有很多action creator, 那么写起来不会很方便, 此时结合方法三里的bindAcionCreator可以一次性导入
稍微提一下bindAcionCreator, 接受两个参数:
// actions.js export const decrement = id => { return { type: "DECREMENT", id } } // drecement 是一个 action creator export const decrement = id => { return { type: "DECREMENT", id } }
import { bindAcionCreator } from 'redux' import * as types from './actions' const App = props => { const { counter, increment, decrement } = props return ( <div> <span></span> <button onClick={() => increment()}></button> <button onClick={() => decrement(1)}></button> </div> ) } const mapStateToProps = state => { return { counter: state.counter } } const mapDispatchToProps = dispatch => { return bindActionCreator(types, dispatch) } export default connect(mapStateToProps, mapDispatchToProps)(App)
在方法五的基础上, 使用装饰器@connect, 此方法需要开启babel
@connect
babel
import { bindAcionCreator } from 'redux' import * as types from './actions' const mapStateToProps = state => { return { counter: state.counter } } const mapDispatchToProps = dispatch => { return bindAcionCreator(types, dispatch) } @connect(mapStateToProps, mapDispatchToProps) class App extends Component { render() { const { counter, increment, decrement } = this.props return ( <div> <span></span> <button onClick={() => increment()}></button> <button onClick={() => decrement(1)}></button> </div> ) } }
自己常用的主要是 4 和 5. 当然肯定是存在别的更加优雅的写法, 也欢迎在评论里和我交流
以下代码均以计数器为例.
方法一
connect
方法不加第二个参数, 默认会将dispatch
传入至组件的props
方法二
使用
mapDispatchToProps
, 此时dispatch
方法不会再被传入到组件的props
中, 取而代之的传入的是一个对象(类似mapStateToProps
), 对象里面包含所有可以dispatch
一个action
的函数方法三
使用
bindAcionCreator
, 相比方法二, 无需编写一系列函数.注意, 需要将
action
写成action creator
形式, 即函数形式方法四(推荐)
将
mapDispatchToProps
定义为一个对象方法五(推荐)
方法四存在的问题是, 如果有很多
action creator
, 那么写起来不会很方便, 此时结合方法三里的bindAcionCreator
可以一次性导入稍微提一下
bindAcionCreator
, 接受两个参数:action creator
), 或者一个对象, 每个元素对应一个action creator
dispatch
方法六
在方法五的基础上, 使用装饰器
@connect
, 此方法需要开启babel
总结
自己常用的主要是 4 和 5. 当然肯定是存在别的更加优雅的写法, 也欢迎在评论里和我交流
参考