使用 Redux 在 React 组件中取消订阅
介绍
要在 React 应用中使用 Redux 状态管理，您可以使用名为react-redux的流行库，这是一个在应用中配置 Redux 的便捷选项。使用 Redux 时，可以触发各种操作，并且根据响应，通过操作订阅和取消订阅机制在全局状态下管理数据。在本指南中，您将了解使用 Redux 的订阅和取消订阅操作。
为什么需要取消订阅某个操作？
有可能一个组件加载时会触发许多操作。这些操作会一直订阅直到收到响应，这可能会导致巨大的瓶颈或内存泄漏。
因此，始终建议在组件卸载后立即取消订阅操作。
订阅动作
在使用服务器数据之前，您始终需要通过 HttpRequest 提供程序（例如fetch()或其他第三方提供程序（如 Axios））触发网络调用。
实现动作订阅的最佳方式是使用componentDidMount()，因为它在组件和 DOM 节点实际初始化之前触发。
例如，您可以使用 Axios 进行 API 调用。使用以下 NPM 命令安装它。
npm install axios
安装Axios包后，实现网络调用，如下所示。
componentDidMount() {
var self = this;
axios
.get("https://jsonplaceholder.typicode.com/users")
.then(function(response) {
self.setState({ users: response.data });
})
.catch(function(error) {
console.log(error);
})
.finally(function() {
// Always executed with the try block
});
}
上面的例子使用axios.get()后跟 API URL，它从服务器获取数据并返回响应。
您可以将此操作称为订阅，但请确保从componentWillUnmount()取消订阅。
使用 Redux Store 订阅操作
除非您订阅来自 Redux 商店的操作，否则您将无法访问商店或分派操作。
通过提供组合的 Reducer 对象，使用createStore()创建的存储如下所示。
import { createStore, combineReducers } from "redux";
import { todos } from "../reducers";
export default () => {
const rootReducer = combineReducers({
todos
});
// Complete store object
return createStore(rootReducer);
};
在上面的例子中，combineReducers()接受应用中存在的 Reducer 列表并将它们组合起来。它表示传递给 createStore ()的状态的普通对象。
现在，您可以在创建商店后直接订阅操作，如下所示。
const unsubscribeMe = store.subscribe(() => console.log(store.getState()))
store.getState()从 store 访问全局状态对象，并订阅您的应用。它始终返回取消注册侦听器的函数。
下一步是分派任何动作，如下所示。
store.dispatch(addTodo('todo 1'))
store.dispatch(addTodo('todo 2'))
操作addTodo()被执行了两次，并且也被订阅了。现在，当你不想监听该操作时，你可以轻松地取消订阅，如下所示。
unsubscribe()
使用上面的代码行，您可以通知商店，所调度的操作不再需要并且需要取消订阅。
取消订阅或中止组件的操作
可以使用subscribe()方法直接创建和订阅商店，您已在本指南中学习过该方法。但是如果您想取消订阅组件中的操作，该怎么办？
是的，可以使用来自商店的道具订阅来做到这一点，如下所示。
componentDidMount() {
const { subscribe } = this.props.store;
this.unsubscribe = subscribe(this.forceUpdate);
}
从命令componentDidMount()中，订阅者访问this.props.store，它用于订阅商店以获取状态数据。
如果你想取消订阅当前组件的操作，可以按如下所示进行。
componentWillUnmount() {
this.unsubscribe();
}
包含this.unsubscribe()因为一旦您订阅了商店，它就会返回取消注册函数，该函数用于在组件卸载后取消订阅操作和存储。
或者，您可以将存储传递给所有连接的组件，以便 React 应用程序中的任何组件都可以无缝访问它。
结论
Redux 带有各种选项，特别是 react-redux，它提供 store 和connect()函数的机制，将状态和动作调度程序返回给每个组件，以便在不再需要时可以轻松地订阅和取消订阅。
我希望本指南中介绍的 react-redux 存储机制和操作取消订阅能够帮助您阻止应用程序内存泄漏。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
