Redux学习篇:关于store.subscribe()监听方法与取消监听的认识

最新推荐文章于 2025-03-23 21:51:38 发布

HaanLen

最新推荐文章于 2025-03-23 21:51:38 发布

阅读量9.2k

点赞数 3

文章标签： react.js Redux

本文链接：https://blog.csdn.net/weixin_40119412/article/details/120811920

版权

本文介绍了如何在React应用中使用Redux store的subscribe方法，实现组件对store状态的实时监听。通过 useEffect hook，展示了如何在组件卸载时取消订阅，确保资源的高效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
在这里插入图片描述

完整代码

import React, {useEffect} from 'react';
import store from '../../Store/index';
import {addAction, decAction} from '../../Action';

export default function Three(props:any){
  const add = (payload:number) => {
    return () => {
      const actionAdd = addAction(payload);
      store.dispatch(actionAdd)
    }
  }

  const dec = (payload:number) => {
    return () => {
      const actionDec = decAction(payload);
      store.dispatch(actionDec);
    }
  }
  useEffect(() => {
    // 监听state的变化
    let unsubscribe  = store.subscribe(() => {
      console.log('监听中..',store.getState())
    })
    return () => {
      // 取消监听
      unsubscribe();
    }
  },[])
  
  return(
    <>
    <h2>这是Ⅲ页</h2>
    <button onClick={add(4)}>点击添加4</button> &nbsp; 
    <button onClick={dec(2)}>点击减去2</button>
    </>
  )
}