Как работает connect без mapDispatchToProps

Question

Как работает connect без mapDispatchToProps

Я читал пример docs для 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

661 2

reactjs redux react-redux

2 ответов:

Comments

Ничего не найдено.

Shubham Khatri · Accepted Answer · 2017-07-26 11:40:31

connect()(AddTodo) передаст dispatch как компонент prop to AddTodo, который все еще полезен даже без состояния или предопределенных действий. Вот почему mapDispatchToProps не нужен в вашем коде

Теперь в вашем компоненте let AddTodo = ({ dispatch }) => { Вы разрушаете свой реквизит, чтобы получить доступ только к dispatch.

Если вы используете mapDispatchToProps, вы сделаете ваше действие addTodo доступным в качестве опоры для вашего компонента, а затем назовете его this.props.addTodo. Таким образом, приведенный выше подход является альтернативой. Это зависит от вас, чтобы выбрать то, что вы чувствуете себя комфортно с

connect просто передает store / dispatch через контекст React, поэтому вам не нужно передавать хранилище через множество компонентов. Однако вам не нужно использовать connect. Любой модуль / специальный шаблон может работать, подключение просто оказывается удобной вещью для использования.

Использование dispatch в компоненте или использование mapDispatchToProps - это одно и то же.

Однако использование mapDispatchToProps дает вам гораздо больше гибкости в структурировании кода и размещении всех создателей действий в одном месте.

Как в соответствии с документы:

[mapDispatchToProps (dispatch, [ownProps]): dispatchProps] (объект или функция):

Если объект передается , каждая функция внутри него считается создателем действия Redux. Объект с теми же именами функций, но с каждое действие создатель обернул в диспетчерский вызов, так что они могут быть вызывается непосредственно, будет объединен в реквизит компонента.

Если функция является передано, будет дана отправка в качестве первого параметра. Это до вас, чтобы вернуть объект, который каким-то образом использует отправка, чтобы связать создателей действия по-своему. (Совет: вы можете использовать помощник bindActionCreators() из Redux.)

Если ваша функция mapDispatchToProps объявлена как принимающая два параметры, он будет вызван с диспетчеризацией как первый параметр и реквизит, передаваемый подключенному компоненту в качестве второго параметра, и будет повторно вызываться всякий раз, когда подключенный компонент получает новый реквизит. (Второй параметр обычно называется ownProps by конвенция.)

Если вы не предоставляете свою собственную mapDispatchToProps функцию или объект полный создателей действий, по умолчанию mapDispatchToProps реализация просто вводит диспетчеризацию в реквизит вашего компонента.

nrgwsth · Accepted Answer · 2017-01-16 08:03:21

Люди склонны писать 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.