Javascript React-Redux 中的调度函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42871136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dispatch function in React-Redux
提问by Quoc-Hao Tran
I'm studying react 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 it get this.pros.storebut simply call the dispatch() function ?
为什么它没有得到this.pros.store而是简单地调用 dispatch() 函数？
EDIT: How does it extract the dispatchfrom this.pros. Isn't the object this.pros.store? and in this case why don't we just extract store?
编辑：它如何dispatch从this.pros. 不是对象this.pros.store吗？在这种情况下，我们为什么不直接提取store？
Thank you.
谢谢你。
采纳答案by Rowland
Your addTodocomponent has access to the store's state and methods(e.g, dispatch, getState, etc). So, when you hooked up your React view with the Redux store via the connectmethod, you had access to store's state and methods.
您的addTodo组件可以访问商店的状态和方法（例如，dispatch、getState 等）。因此，当您通过connect方法将 React 视图与 Redux 存储连接时，您可以访问存储的状态和方法。
({ dispatch })is simply using JS destructuring assignmentto extract dispatchfrom this.propsobject.
({ dispatch })只是使用JS解构赋值dispatch从this.props对象中提取。
回答by jabacchetta
react-redux is the librarythat is passing these methods to your component as props.
react-redux 是将这些方法作为道具传递给组件的库。
dispatch() is the method used to dispatch actionsand trigger state changes to the store. react-redux is simply trying to give you convenient access to it.
dispatch() 是用于调度操作和触发 store 状态更改的方法。react-redux 只是试图让您方便地访问它。
Note, however, that dispatch is not available on props if you do pass in actions to your connect function. In other words, in the code below, since I'm passing someActionto connect, dispatch()is no longer available on props.
但是请注意，如果您确实将操作传递给连接函数，则该调度在道具上不可用。换句话说，在下面的代码中，由于我正在传递someAction连接，dispatch()因此不再适用于道具。
The benefit to this approach, however, is that you now have the "connected" action available on your props that will automatically be dispatchedfor you when you invoke it.
然而，这种方法的好处是，你现在可以在你的道具上使用“连接”动作，当你调用它时，它会自动为你分派。
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);
Or if we were to use object destructuringas shown in the example you give...
或者，如果我们要使用对象解构，如您给出的示例所示...
const MyComponent = ({ someAction }) => {
someAction();
};
It's important to note, however, that you must invoke the connected action available on props. If you tried to invoke someAction(), you'd be invoking the raw, imported action — not the connected action available on props. The example given below will NOT update the store.
但是，重要的是要注意，您必须调用道具上可用的连接操作。如果您尝试调用 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();
};
This is a common bug that people run into all the time while using react-redux. Following eslint's no-shadow rulecan help you avoid this pitfall.
这是人们在使用 react-redux 时经常遇到的一个常见错误。遵循 eslint 的无影子规则可以帮助您避免这个陷阱。
