Вопрос по redux, reactjs, react-redux – Вот

6

ал примеры документов для приставок и нашел этот пример компонента контейнера. Может кто-нибудь объяснить, почему в этом случае 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   ответа
0

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

диспетчеризация будет передана этому компоненту из родительского компонента в качестве реквизита. nrgwsth
но такой подход не хорош. Вы должны использовать Connect для передачи и поддержки. прочитайте комментарий от gaearonВот nrgwsth
Я понимаю эту концепцию, но не знаю, как в этом случае компонент получает отправку. У меня сложилось впечатление, что для получения функции отправки мне нужно будет передать mapDispatchToProps, что в данном случае не так. Это тот случай, когда только потому, что я передаю компонент функции подключения, он каким-то образом получает отправку сейчас? Nate
9

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

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

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

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

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

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

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

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

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

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

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

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

В случае, если мне не нужноmapDispatchToProps, я должен передать пустой объект или просто оставить его пустым и позволить ему ввестиdispatch в мой компонент. Это как-то влияет на производительность? Norbert
@Norbert В случае, если вам не нужны mapDispatchToProps, вы можете просто полностью избежать второго аргумента. Все это разные способы сделать то же самое и, следовательно, не имеют большой разницы в производительности Shubham Khatri

Похожие вопросы