Функция отправки в React-Redux

Я изучаю реакцию, и у меня есть пример вроде этого

//index.js
const store = createStore(reducer)
render(
  <Provider store={store}>
    <AddTodo />
  </Provider>,
  document.getElementById('root')
)

//Apptodo.js
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 = ''
      }}>
    .......

Почему он не получил this.pros.store, а просто вызвал функцию dispatch()?

EDIT: Как извлечь dispatch из this.pros. Разве это не объект this.pros.store? и в этом случае, почему бы нам просто не извлечь store?

Спасибо.

Ответы

Ответ 1

Ваш компонент addTodo имеет доступ к состоянию и методам хранения (например, dispatch, getState и т.д.). Поэтому, когда вы подключили свое представление React к хранилищу Redux с помощью метода connect, у вас был доступ к состоянию и методам хранилища.

({ dispatch }) просто использует JS назначение деструктуризации для извлечения dispatch из объекта this.props.

Ответ 2

response-redux - это библиотека, которая передает эти методы вашему компоненту в качестве реквизита.

dispatch() - это метод, используемый для отправки действий и запуска изменений состояния хранилища. response-redux просто пытается предоставить вам удобный доступ к нему.

Тем не менее, обратите внимание, что отправка недоступна для реквизита, если вы передаете действия своей функции подключения. Другими словами, в приведенном ниже коде, поскольку я передаю someAction для подключения, dispatch() больше не доступен для реквизита.

Преимущество этого подхода заключается в том, что теперь у вас есть "подключенное" действие, доступное на ваших реквизитах, которое будет автоматически отправлено вам, когда вы его вызовете.

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { someAction } from '../myActions';

const MyComponent = (props) => {
  // someAction is automatically dispatched for you
  // there is no need to call dispatch(props.someAction());
  props.someAction();
};

export default connect(null, { someAction })(MyComponent);

Или если бы мы использовали разрушение объектов, как показано в приведенном вами примере...

const MyComponent = ({ someAction }) => {
  someAction();
};

Важно отметить, однако, что вы должны вызвать подключенное действие, доступное для реквизита. Если вы попытаетесь вызвать someAction(), вы будете вызывать необработанное импортированное действие, а не связанное действие, доступное для реквизита. Приведенный ниже пример НЕ будет обновлять магазин.

const MyComponent = (props) => {
  // we never destructured someAction off of props
  // and we're not invoking props.someAction
  // that means we're invoking the raw action that was originally imported
  // this raw action is not connected, and won't be automatically dispatched
  someAction();
};

Это распространенная ошибка, с которой люди постоянно сталкиваются при использовании response-redux. Следуя правилу eslint no-shadow, вы сможете избежать этой ловушки.