Use initGlobalState(state) to pass values globally

  • parameter

    • state – Record<string, any>– will choose

  • usage

    Define the global state and return the communication method, which is recommended for the main application. Microapplications obtain the communication method from props.

  • return

    • MicroAppStateActions

      • OnGlobalStateChange :== Listen for data changes ==

        (callback: OnGlobalStateChangeCallback, fireImmediately? : Boolean) => callback; fireImmediately = true

      • SetGlobalState :== Change data ==

        (state: Record

        ) => Boolean, set global state by level 1 attribute, only existing level 1 attribute can be modified in micro application
        ,>

      • OffGlobalStateChange: == Remove listener ==

        () => Boolean, remove status listening for current application, called by default when microapplication is umount

  • The sample

Main application:

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// Initialize state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) = > {
  // state: state after the change; Prev Status before change
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();
Copy the code

Application:

// Get the communication method from the lifecycle mount. Use the same method as master
export function mount(props) {

  props.onGlobalStateChange((state, prev) = > {
    // state: state after the change; Prev Status before change
    console.log(state, prev);
  });

  props.setGlobalState(state);
}
Copy the code

Advantages: Store can be passed to sub-apps

Weakness: the application in the app. Ts to better use props. OnChangeGlobalState like grammar

Routing-bound consumer microapplications

Main application: The useQiankunStateForSlave function needs to be exported in SRC /app.ts. The return value of the function will be passed to the micro application as props, as shown in the following example:

// src/app.ts
export function useQiankunStateForSlave() {
  const [globalState, setGlobalState] = useState({ str: 'aaa' })
  const [ablState, setAblState] = useState({ hh: 'kkk' })
  // The child application is actually called to change the state method
  // The parameters and implementation can be customized, the child application directly calls setGlobalState is not effective, so this extra method is needed, it is a pit
  const setState = (str: any) = > { setGlobalState({ str}) }  
  const setablState = (hh: any) = > { setAblState({hh}) }  
  return { globalState, setGlobalState, setState ,ablState,setAblState,setablState};
}
Copy the code
  • The actual call to the child application to change the state method, the argument and implementation can be customized, the child application directly call setGlobalState is not effective, so this extra method is needed, it is a pit

Sub-application: a global model is automatically generated in the micro-application, and the props of the main application can be obtained in any component.

import { useModel } from 'umi';
   
function MyPage() {
  const masterProps = useModel('@@qiankunStateFromMaster');
  return <div>{ JSON.strigify(masterProps) }</div>;
}
Copy the code

Changes and listening in child applications

const alist=masterProps.globalState.str.list
console.log(alist)
masterProps.onGlobalStateChange((state: any, prev: any) = > {
state: Changed state; Prev Status before changeconsole.log(state, prev);
 });
 useEffect(() = > {    masterProps.setState('bbb')}, [])console.log('masterProps',masterProps)

Copy the code

Pass based on props

React is similar to the communication between components

When configuring apps in the primary application, pass the data as props (see the primary application runtime Configuration section)

// src/app.js
   
export const qiankun = fetch('/config').then(config= > {
  return {
    apps: [{name: 'app1'.entry: '//localhost:2222'.props: {
          onClick: event= > console.log(event),
          name: 'xx'.age: 1,},},],}; });Copy the code

The child application gets the props consumption data in the lifecycle hook (see the child runtime Configuration section)