为什么在没有 mapStateToProps 或 mapDispatchToProps 作为参数的情况下调用连接函数? [英] Why call connect function without mapStateToProps or mapDispatchToProps as args?

问题描述

在文档中的 Redux 示例之一中，调用 connect 函数时不带参数.这可以在示例的底部看到.

从 'react' 导入 React从'react-redux'导入{连接}从 '../actions' 导入 { addTodo }让 AddTodo = ({ dispatch }) =>{让输入返回 (<div><form onSubmit={e =>{e.preventDefault()如果 (!input.value.trim()) {返回}dispatch(addTodo(input.value))输入值 = ''}}><输入参考={节点=>{输入 = 节点}}/><按钮类型=提交">添加待办事项</表单>

)}AddTodo = connect()(AddTodo)导出默认 AddTodo

根据我的理解，connect 函数的目的是让容器组件以回调的形式访问操作调度程序，以及以道具的形式访问存储中的状态.

因此，在不指定要授予组件访问权限的状态和操作创建者的情况下调用 connect 是没有意义的.

解决方案

connect()(AddTodo) 会将 dispatch 作为道具传递给 AddTodo 组件，该组件仍然是即使没有状态或预定义的操作也很有用.

Redux(和 react-redux)是一个非常低级的库.它允许您非常严格地限制组件可以访问哪些状态和操作，或者您可以将整个 store 和每个操作传递给每个组件，以及介于两者之间的所有内容.

由您决定适合您的应用程序的严格程度.

您可能会问，为什么要使用 connect?好吧，connect 只是通过 React 上下文传递 store/dispatch，所以你不必通过许多组件传递 store.不过，您不必 使用 connect.任何模块/HOC 模式都可以工作，connect 恰好是一个使用方便的东西.

In one of the Redux examples from the docs the connect function is called with no args. This can be seen at the bottom of the example.

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

From my understanding the purpose of the connect function it to give container components access to actions dispatchers in the form of callbacks aswell as access to state from the store in the form of props.

Therefore it doesn't make sense as to why you would call connect without specifying the state and action creators that you want to give the component access to.

解决方案

connect()(AddTodo) will pass dispatch as a prop to AddTodo component, which is still useful even without state or predefined actions.

Redux (and react-redux) is a pretty low-level library. It allows you to be very strict about what state and actions a component has access to, or you can pass the entire store and every action to every component, and everything in between.

It's up to you to decide what level of strictness is appropriate for your application.

Why use connect at all, you may ask? Well connect just passes store / dispatch through React context so you don't have to pass the store through many components. You don't have to use connect though. Any module / HOC pattern could work, connect just happens to be a convenient thing to use.

这篇关于为什么在没有 mapStateToProps 或 mapDispatchToProps 作为参数的情况下调用连接函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！