在 Redux 中直接使用 this.props.dispatch 与 store.dispatch
介绍
在 Redux 中调度操作是更新 Redux 存储状态的基本方法。操作用于存储状态的相关信息，它们通过存储对象上可用的dispatch()方法到达存储。您可以直接使用store.dispatch()或this.props.dispatch()来调度这些操作。本指南将引导您比较这两种方法，以帮助您了解哪种方法更好以及原因。
在 Redux 中调度 Action
操作保存或存储需要传递给 Redux存储的信息，这些信息是从分派操作的组件中获取的。这意味着，虽然您的存储可能保存与多个组件有关的信息，但它可以被视为系统中的独立模块。您的组件不需要知道它们正在更新什么状态- 它们的主要关注点应该是分派必要的操作。其余的计算由Reducer和存储本身处理。
例如，如果您有一个显示个人资料详细信息的Profile组件和一个打开弹出窗口供您编辑个人资料信息的Navbar组件，则组件定义不足以确定Navbar组件将与包含个人资料详细信息的商店进行交互。您的商店位于应用层次结构的顶层，而组件位于较低层，因此将其作为每个组件内的较低层模块导入是多余的。
store.dispatch() 与 this.props.dispatch()
考虑以下代码，其中有一个store和一个reducer ，它分派一个类型为ADD_USER的默认操作。这里，store直接使用store.dispatch()方法来分派操作。
import { createStore } from 'redux'
const store = createStore(users, null)
const addUser=(user)=> {
return {
type: 'ADD_USER',
user: user
}
}
store.dispatch(addUser(user))
现在考虑一个用例，其中应用中的组件需要分派相同的操作。在这种情况下，您的组件不知道它正在与之交互的存储，但其直接父组件连接到存储并使用this.props.dispatch()为子组件分派操作。
@connect(store => ({ myStore: store.myStore }))
class UsersContainer extends Component {
AddUser = (newUser) => {
this.props.dispatch(type:'ADD_USER', newUser);
}
render() {
return (
<UsersComponent
onAddUser={this.AddUser}
/>
}
}
UsersComponent只是触发一个函数，其父组件UsersContainer使用this.props.dispatch()调度ADD_USER操作。UsersContainer与store连接，因此它知道它正在与哪个 store 交互。在实际应用中，您将拥有一个组件树，其中深度嵌套的组件需要与高级 store 交互。每次调度操作时，您都可能希望与不同的 store 交互。
@connect(store => ({ myStore: store.myStore }))
因此，使用所示的connect()函数， dispatch()作为prop传递给其子组件，然后从子组件分派必要的操作。
结论
现在很明显，与直接使用store.dispatch()相比， this.props.dispatch()是一种在 Redux 中调度操作的更合乎逻辑且更好的方法，因为它可以确保您的 Redux 存储不会成为单例模块。大多数情况下，dispatch()是从存储消费组件内部调用的，与this.props.dispatch()类似，您也可以通过使用 mapDispatchToProps ()方法将其与 props 映射并将其传递给connect()函数来调度操作，以获得更清晰的语法。或者，您可以探索 Redux Saga 等库，并在其官方文档中了解有关调度异步操作的更多信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~