React Redux Submission Function

Question

I am studying a reaction and I have an example like this

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

Why didn’t he get it this.pros.store, but simply called the dispatch () function?

EDIT: How to extract dispatchfrom this.pros. Isn't that an object this.pros.store? and in this case, why don't we just extract it store?

Thank.

Answer 1

Your component addTodohas access to state and storage methods (e.g. dispatch, getState, etc.). Therefore, when you connected your React view to the Redux repository using the method connect, you had access to the state and methods of the repository.

({ dispatch }) JS dispatch this.props.

Answer 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, .