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

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