React-Redux 中的调度函数

Question

我正在研究反应，我有一个这样的例子

//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()函数？

编辑：它如何从this.pros 中提取dispatch。对象不是 this.pros.store 吗？在这种情况下，我们为什么不直接提取store？

谢谢。

Answer 1

react-redux is the library 将这些方法作为道具传递给您的组件。

dispatch() is the method used to dispatch actions 并触发存储的状态更改。 react-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);

或者如果我们要使用object destructuring，如您提供的示例中所示......

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();
};

这是人们在使用 react-redux 时经常遇到的一个常见错误。 Following eslint's no-shadow rule 可以帮助您避免这个陷阱。

Answer 2

您的addTodo 组件可以访问商店的状态和方法（例如，dispatch、getState 等）。因此，当您通过 connect 方法将 React 视图与 Redux 存储连接时，您可以访问存储的状态和方法。

({ dispatch }) 只是使用JS destructuring assignment 从this.props 对象中提取dispatch。