在没有 mapDispatchToProps 的情况下连接如何工作

IT技术 reactjs redux react-redux
2021-04-06 01:30:39

我正在阅读 redux 的示例文档，我发现了这个容器组件示例。有人可以解释为什么在这种情况下这里不需要 mapDispatchToProps。同样，函数是如何获得调度函数的？

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
2个回答

connect()(AddTodo)将dispatch作为prop to AddTodo组件传递，即使没有状态或预定义的操作，这仍然很有用。这mapDispatchToProps就是您的代码中不需要的原因

现在在您的组件中，let AddTodo = ({ dispatch }) => {您正在解构您的props以仅访问dispatch.

如果您使用，mapDispatchToProps您将使您的addTodo操作作为组件的props可用，然后像this.props.addTodo. 所以上述方法是一种替代方法。这取决于你选择你觉得舒服的东西

connect只是store / dispatch通过 React 上下文，所以你不必通过许多组件来传递 store。不过，您不必使用连接。任何module/ HOC 模式都可以工作，连接恰好是一个使用方便的东西。

使用dispatch的组件或使用mapDispatchToProps是同一个东西。

然而，使用mapDispatchToProps使您可以更灵活地构建代码并将所有动作创建者集中在一个地方。

根据文档：

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps]（对象或函数）：

如果传递了一个对象，则假定其中的每个函数都是 Redux 动作创建者。具有相同函数名称但每个动作创建者都包含在调度调用中以便可以直接调用它们的对象将合并到组件的 props 中。

如果传递了一个函数，它将作为第一个参数分配给它。由您来返回一个对象，该对象以某种方式使用 dispatch 以您自己的方式绑定动作创建者。（提示：您可以使用bindActionCreators()Redux的帮助程序。）

如果你的mapDispatchToProps函数被声明为接受两个参数，它会以 dispatch 作为第一个参数和传递给连接组件的 props 作为第二个参数被调用，并且会在连接组件接收到新的 props 时重新调用。（按照惯例，第二个参数通常称为 ownProps。）

如果你不提供你自己的mapDispatchToProps函数或充满动作创建者的对象，默认mapDispatchToProps 实现只是将 dispatch 注入到你的组件的 props 中。

@Norbert 如果您不需要 mapDispatchToProps，您可以完全避免使用第二个参数。所有这些都是做同一件事的不同方法，因此没有太大的性能差异
2021-05-28 01:30:39
如果我不需要mapDispatchToProps，我应该传递一个空对象还是将其留空并让它注入dispatch到我的组件中。它会以任何方式影响性能吗？
2021-06-14 01:30:39

人们倾向于以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.

dispatch 将从父组件作为道具传递给这个组件。
2021-06-08 01:30:39
我理解这个概念，但我不知道在这种情况下组件如何接收调度。我的印象是，要接收调度函数，我需要传递一个 mapDispatchToProps，但在这种情况下并非如此。是不是仅仅因为我将组件传递给连接函数它现在以某种方式接收调度？
2021-06-19 01:30:39
但这种做法并不好。您应该使用连接来传递调度和道具。在这里阅读 gaearon 的评论
2021-06-19 01:30:39
其它你可能感兴趣的问题
上一篇使用动态键对 setState 做出react 下一篇带有 IE11 polyfill 导入的 Starter create-react-app 仍然在 IE11 中中止