我在Redux上观看了egghead.io教程,感觉我对Redux 尝试要做的事情有所了解,但它的实际工作方式对我来说仍然是神秘的。我使用react-redux连接方法实现了Dan的简单计数器应用程序,但我真的不了解我的实现。我尝试了两种可能的方法:
不通过派遣:
const mapDispatchToProps = {
upIt: () => {
return ({type:'INCREMENT'}
)
},
downIt: () => {
return({type:'DECREMENT'})
}
}
传递调度:
const mapDispatchToProps = dispatch => ({
upIt: () => {
dispatch({type:'INCREMENT'}
)
},
downIt: () => {
dispatch({type:'DECREMENT'})
}
})
计数器可以使用其中任何一个或两个选项,但我不确定第一个选项(我从不调用' dispatch')是如何设法连接到store.dispatch方法的。有什么理由我更喜欢用另一种方法编写方法吗?
答案 0 :(得分:5)
将mapDispatchToProps
视为将相关action creators传递给您的组件的界面(这些动作创建者出现在您的组件中,并作为道具<在您的组件中访问/强>)。
动作创建者 不与操作相同。
在Redux中,操作只是一个简单的JavaScript对象,如下所示(它可以包含您想要的任何属性,但必须包含type
属性):
{ type: 'INCREMENT' }
这些操作将发送到 reducer ,后者根据操作属性处理如何更新状态。
操作创建者是函数,在调用时将这些操作发送到reducer 。
因此,在您的示例中,upIt
和downIt
是操作创建者,而{type:'INCREMENT'}
和{type:'DECREMENT'}
是操作强>
以upIt
为例:
upIt: () => {
return ( {type:'INCREMENT'} )
}
来自connect()
的{{1}}功能将截取此动作创建器功能返回的操作,并将其发送到redux商店(它然后由 reducer 处理。
react-redux
功能实现:
connect
但是,请考虑您可能希望从单个操作创建者 分派多个操作的情况。当一个函数只能connect(mapStateToProps, mapDispatchToProps)(ComponentName)
一次值时,这怎么可能呢?
这是return
dispatch
参数的来源!它允许您从单个操作创建者发送多个操作。
例如,假设您要在UI中创建一个按钮以递增计数器,然后在5秒后再次递减计数器。 mapDispatchToProps
中定义的操作创建者可能如下所示:
mapDispatchToProps
请注意我们如何在同一个动作创建者中两次调用const mapDispatchToProps = dispatch => ({
incrementForFiveSeconds: () => {
dispatch( {type:'INCREMENT'} );
setTimeout(() => {
dispatch( {type:'DECREMENT'} );
}, 5000);
},
// other action creators
})
函数!
总结:
dispatch
或{{ 1}} interface。return
界面。 答案 1 :(得分:2)
来自Redux文档文档:
[
mapDispatchToProps(dispatch, [ownProps]): dispatchProps
](对象 或功能):如果传递了一个对象,则其中的每个函数都被假定为a Redux动作创作者。具有相同功能名称但具有的对象 每个动作创建者都被包含在
dispatch
电话中,所以他们可能会这样做 直接调用,将合并到组件的道具中。如果一个 函数被传递,它将被赋予dispatch
。如果你不想 订阅商店更新,传递null
或undefined
代替mapStateToProps
。这取决于你以某种方式返回一个对象 使用dispatch
以您自己的方式绑定动作创建者。 (提示:你可以 使用bindActionCreators()
来自Redux的助手。)如果省略它,则默认实现 将dispatch
注入组件的道具中。如果是ownProps
指定为第二个参数,其值将是传递给的道具 您的组件,mapDispatchToProps
将在任何时候重新调用 该组件接收新的道具。
在第一种情况下
const mapDispatchToProps = {
upIt: () => {
return ({type:'INCREMENT'}
)
},
downIt: () => {
return({type:'DECREMENT'})
}
}
mapDispatchToProps是一个对象,因此upIt
和downIt
被假定为动作创建者。
在第二种情况下:
const mapDispatchToProps = dispatch => ({
upIt: () => {
dispatch({type:'INCREMENT'}
)
},
downIt: () => {
dispatch({type:'DECREMENT'})
}
})
mapDispatchToProps
是一个函数,因此必须将其中的每个函数传递给dispatch