Umijs - data transmission between main and sub applications of Qiankun

One . Sending data in the main application

import {
     initGlobalState } from 'qiankun';
//  Mainly through  setGlobalState  To put objects into a global common to master and child applications State in .
const {
     setGlobalState } = initGlobalState({
    });
//  Case study 
setGlobalState({
    
 userName: window.atob(userName),
 age: 10,
});

Two . Receiving data in sub application

import React, {
     useState, useEffect } from 'react';
//  Need to use  useModel  To get the data transferred in the main application 
import {
     useModel } from 'umi';

//  Get the parameters passed between master and child applications 
const getMainSubProps = () => {
    
  //  The name is fixed  @@qiankunStateFromMaster
  const masterProps = useModel('@@qiankunStateFromMaster');
  //  You can use one State De storage , In this way, other places only need to introduce this getMainSubProps Components , Get the returned result .
  const [ name, setUserName ] = useState<string>([]);

  useEffect(() => {
    
  	//  We need to add  ?  Of , Prevent null pointer exception 
    masterProps?.onGlobalStateChange((state: any) => {
    
      const {
     userName ,age } = state;
      if(userName){
    
		setUserName(userName);
	  }
    });
  }, []);

  return {
     name };
};

export default getMainSubProps;

In sub applications , Just write a basic component , Avoid repeated monitoring . Just listen to the updated value . If you need to use this component on other pages , The pseudocode is as follows ：

import getMainSubProps from 'xxx';
const {
    age,name} = getMainSubProps();