redux-thunk - 即使我使用了 mapDispatchToProps 也没有调度
redux-thunk - not dispatching even though I used mapDispatchToProps
我的 redux 操作有一个奇怪的问题。
我在同一组件内有两个函数 A()、B(),它们调用一个动作函数 ac(),该函数使用 thunk 对服务器进行异步调用。
我使用 mapDispatchToprops 将 ac() 映射到组件。
当我调用 A() 时,它就像一个魅力一样工作,调度操作并更新状态。但是,如果我调用 B(),它以相同的方式调用相同的 ac(),则不会分派该操作。就好像我在调用一个普通的函数所以里面的thunk没有被执行
我是不是漏掉了什么?
编辑:generateAgreement() 有效但 signAgreement() 无效,即使它们调用相同的操作 updateAgreements()
generateAgreement = async evt => {
evt.preventDefault();
const selectedAgreement = this.props.myAgreements[evt.target.id];
this.props.updateAgreements(
Object.assign(
{},
{
myAgreements: this.props.myAgreements,
selectedAgreement
}
),
this.props.user.token,
"generate-agreement",
{
agreementId: selectedAgreement.id
},
actionTypes.GENERATE_AGREEMENT
);
};
signAgreement = async evt => {
evt.preventDefault();
const selectedAgreement = this.props.myAgreements[evt.target.id];
this.props.updateAgreements(
Object.assign(
{},
{
myAgreements: this.props.myAgreements,
selectedAgreement
}
),
this.props.user.token,
"sign-agreement",
{
agreementId: selectedAgreement.id
},
actionTypes.SIGN_AGREEMENT
);
};
我找到问题了。这是避免到处使用对象解构的经典示例之一。
就我而言,在我的父组件 1 中,我从 actions.js
文件中导入如下:
Component_1.js
import { updateAgreements } from "../redux/actions.js"
...
render() {
return <Child
updateAgreements={updateAgreements}
/>
}
const mapDispatchToProps = {
updateAgreements
}
...
在父组件 2 中,我有以下代码,这就是 generateAgreement 按预期工作的原因:
Component_2.js
import { updateAgreements } from "../redux/actions.js"
...
render() {\
const { updateAgreements } = this.props;
return <Child
updateAgreements={updateAgreements}
/>
}
const mapDispatchToProps = {
updateAgreements
}
...
请注意,在 component_1 中,updateAgreements
是从 import 语句中获取的,而在 component_2 中,它是从道具中获取的。
我看到很多人警告过度使用解构,现在我明白了它如何导致像这样的细微错误。
我的 redux 操作有一个奇怪的问题。
我在同一组件内有两个函数 A()、B(),它们调用一个动作函数 ac(),该函数使用 thunk 对服务器进行异步调用。
我使用 mapDispatchToprops 将 ac() 映射到组件。
当我调用 A() 时,它就像一个魅力一样工作,调度操作并更新状态。但是,如果我调用 B(),它以相同的方式调用相同的 ac(),则不会分派该操作。就好像我在调用一个普通的函数所以里面的thunk没有被执行
我是不是漏掉了什么?
编辑:generateAgreement() 有效但 signAgreement() 无效,即使它们调用相同的操作 updateAgreements()
generateAgreement = async evt => {
evt.preventDefault();
const selectedAgreement = this.props.myAgreements[evt.target.id];
this.props.updateAgreements(
Object.assign(
{},
{
myAgreements: this.props.myAgreements,
selectedAgreement
}
),
this.props.user.token,
"generate-agreement",
{
agreementId: selectedAgreement.id
},
actionTypes.GENERATE_AGREEMENT
);
};
signAgreement = async evt => {
evt.preventDefault();
const selectedAgreement = this.props.myAgreements[evt.target.id];
this.props.updateAgreements(
Object.assign(
{},
{
myAgreements: this.props.myAgreements,
selectedAgreement
}
),
this.props.user.token,
"sign-agreement",
{
agreementId: selectedAgreement.id
},
actionTypes.SIGN_AGREEMENT
);
};
我找到问题了。这是避免到处使用对象解构的经典示例之一。
就我而言,在我的父组件 1 中,我从 actions.js
文件中导入如下:
Component_1.js
import { updateAgreements } from "../redux/actions.js"
...
render() {
return <Child
updateAgreements={updateAgreements}
/>
}
const mapDispatchToProps = {
updateAgreements
}
...
在父组件 2 中,我有以下代码,这就是 generateAgreement 按预期工作的原因:
Component_2.js
import { updateAgreements } from "../redux/actions.js"
...
render() {\
const { updateAgreements } = this.props;
return <Child
updateAgreements={updateAgreements}
/>
}
const mapDispatchToProps = {
updateAgreements
}
...
请注意,在 component_1 中,updateAgreements
是从 import 语句中获取的,而在 component_2 中,它是从道具中获取的。
我看到很多人警告过度使用解构,现在我明白了它如何导致像这样的细微错误。