使用 Redux 在 React 组件中取消订阅

2020-08-27 08:00:00 · 飞浪

介绍要在React应用中使用Redux状态管理，您可以使用名为react-redux的流行库，这是一个在应用中配置Redux的便捷选项。使用Redux时，可以触发各种操作，并且根据响应

介绍

要在 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 存储机制和操作取消订阅能够帮助您阻止应用程序内存泄漏。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 Redux 在 React 组件中取消订阅

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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 }); }

import { createStore, combineReducers } from "redux"; import { todos } from "../reducers"; export default () => { const rootReducer = combineReducers({ todos }); // Complete store object return createStore(rootReducer); };