如何在没有map的情况下连接工作DispatchToProps
我正在阅读redux的示例文档,并且我找到了容器组件的示例。有人可以解释为什么在这种情况下mapDispatchToProps不需要在这里。另外,函数如何获得调度功能?如何在没有map的情况下连接工作DispatchToProps
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}>
<input ref={node => {
input = node
}} />
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo
connect()(AddTodo)
将通过dispatch
作为prop to AddTodo
组件,即使没有状态或预定义的操作,该组件仍然有用。这就是您的代码中不需要mapDispatchToProps
的原因
现在在您的组件let AddTodo = ({ dispatch }) => {
中,您正在解构您的道具以仅访问dispatch
。
如果您使用mapDispatchToProps
,您将使您的addTodo
动作可作为组件的道具使用,然后将其称为this.props.addTodo
。所以上述方法是一种选择。这取决于你选择什么你感觉舒服与
connect
只是通过store/dispatch
通过React上下文,所以你不必通过许多组件通过商店。你不必使用连接。任何模块/ HOC模式都可以工作,连接恰好是一个方便的使用方法。
在组件中使用dispatch
或使用mapDispatchToProps
是同一件事。
但是使用mapDispatchToProps
可以让您更灵活地构建代码并将所有动作创建者放在同一个位置。
作为每docs:
[mapDispatchToProps(调度,[ownProps]):dispatchProps](对象或函数):
如果对象被传递,每个它内部的函数被假定为Redux动作创建者。一个具有相同函数名称的对象,但每个动作创建者都被包装成一个调度调用,因此它们可以直接调用 ,将被合并到组件的道具中。
如果一个函数通过,它将被作为第一个参数发送。这取决于你返回一个对象,以某种方式使用 调度以自己的方式绑定动作创建者。(提示:你可以使用 的
bindActionCreators()
助手从终极版)如果您
mapDispatchToProps
函数声明为采用两个 参数,它将派遣传递给所连接的组件作为第一个参数和 道具被称为第二个参数 ,并且只要连接的组件收到新的道具,就会被重新调用。 (第二个参数通常由 惯例被称为ownProps。)如果你不提供自己的
mapDispatchToProps
功能或对象 全面的行动创造者,默认mapDispatchToProps
实现只是注入派遣到组件的道具。
人们倾向于用两种方式写react
。一种是你通常会遇到的基于class
的方法。它基本上使用类。
class App extends Component{
constructor(){
super();
this.state={}
}
render(){
return(
//
);
}
}
和其他是functional approach
。
const App = (props) => {
return(
<div><h2>{{props.name}}</h2></div>
)
}
所以,在功能性方法,您可以通过数据arguments
到您的组件。 因此,如果您已将dispatch
从父组件传递到props
中的此组件。您可以使用props.dispatch
访问它。
我明白这个概念,但我不知道在这种情况下,组件是如何接收调度的。我的印象是接收调度函数,我需要传递一个mapDispatchToProps,在这种情况下并不是这样。是不是因为我将组件传递给连接函数,现在它以某种方式接收调度? – Nate
调度将作为道具从父组件传递到此组件。 – nrgwsth
但这种做法并不好。你应该使用connect来传递调度和道具。阅读gaearon的评论[这里](https://github.com/reactjs/redux/issues/1176) – nrgwsth