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 是将这些方法作为道具传递给组件的库。

dispatch() 是用于调度操作和触发 store 状态更改的方法。 react-redux 只是试图让您方便地访问它。

但是请注意，如果您确实将操作传递给连接函数，则该调度在道具上不可用。 换句话说，在下面的代码中，由于我将someAction传递给 connect， dispatch()在 props 上不再可用。

然而，这种方法的好处是，你现在可以在你的道具上使用“连接”动作，当你调用它时，它会自动为你分派。

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()，您将调用原始的、导入的动作——而不是道具上可用的连接动作。 下面给出的示例不会更新 store 。

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 时经常遇到的一个常见错误。 遵循 eslint 的无影子规则可以帮助您避免这个陷阱。

Answer 2

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

({ dispatch })只是使用 JS 解构赋值从this.props对象中提取dispatch 。