微前端-qiankun: 全局状态initialState使用

微前端中子应用和主应用之间的数据怎么传输？

之前想到的解决办法是将数据存到localStorage中，这样可以解决传输的问题，每个子应用如果想要数据直接缓存中取就可以了。但是这样又产生了一个新的问题，子应用组件中不能实时拿到缓存中最新的数据，而是上一次的缓存，这不是我们想要的效果。
qiankun框架很好地帮我们解决了这个问题，下面详细介绍怎么使用initialState来打造全局(主应用和微应用)state吧！

第一步：首先我们在主应用中src目录下创建一个action.js

//主应用的src/action.js
import { initGlobalState } from 'qiankun'
export const initialState = {
  globalLocation: {
    SUID: 60919,
    station: '东湖校区'
  }
}
const actions = initGlobalState(initialState)

// 定义一个获取state的方法下发到子应用
actions.getGlobalState = (key) => {
  // 有key，表示取globalState下的某个子级对象
  // 无key，表示取全部
  return key ? initialState[key] : initialState
}

actions.onGlobalStateChange((newState, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  // console.log('main change', JSON.stringify(newState), JSON.stringify(prev));

  for (let key in newState) {
    initialState[key] = newState[key]
  }
});

export default actions

第二步：在主应用的某个组件中用setGlobalState更改state值

 //这里引入刚才创建的action.js
import action, { initialState } from '@/action'
const Location = () => {
  const dispatch = useDispatch()
  const [selectedCity, setSelectedCity] = useState(
    initialState.globalLocation.station
  )
  const stationsMenu = (
    <Menu>
      {map((item) => (
          <Menu.Item
            key={item._id}
            onClick={() => {
              setSelectedCity(item.name)
              action.setGlobalState({ globalLocation: {
                station: item.name,
                SUID: item.SUID
              } })
            }}
          >
            {item.name}
          </Menu.Item>
        ))}
    </Menu>
  )

第三步：在子应用src目录下新建action.js

function emptyAction() {
  // 警告：提示当前使用的是空 Action
  console.warn('Current execute action is empty!')
}

class Actions {
  // 默认值为空 Action
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction,
  }

  /**
   * 设置 actions
   */
  setActions(actions) {
    this.actions = actions
  }

  /**
   * 映射
   */
  onGlobalStateChange(...args) {
    return this.actions.onGlobalStateChange(...args)
  }

  /**
   * 映射
   */
  setGlobalState(...args) {
    return this.actions.setGlobalState(...args)
  }
}

const actions = new Actions()
export default actions

第四步：在子项目的入口文件中设置子应用的全局state

import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router-dom'
import { history } from './routerConfig'
import LayoutMain from './layout/index'
import zhCN from 'antd/lib/locale/zh_CN'
import 'moment/locale/zh-cn'
import { ConfigProvider } from 'antd'
import action from '@/action'//引入子应用中创建的action.js

function render() {
  ReactDOM.render(
    <Router history={history}>
      <ConfigProvider getPopupContainer={(node) => node} locale={zhCN}>
        <div id="container-sub2">
          <LayoutMain />
        </div>
      </ConfigProvider>
    </Router>,
    document.getElementById('root_mannualRecord')
  )
}

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap() {}
export async function mount(props) {
  action.setActions(props)
  props.onGlobalStateChange((state) => {
    props.setGlobalState(state)
  })
  render()
}
export async function unmount() {
  if (document.getElementById('root_mannualRecord') !== null) {
    ReactDOM.unmountComponentAtNode(
      document.getElementById('root_mannualRecord')
    )
  }
}

在子项目的任意组件中useEffect或者componentDidMount中拿数据就可以了

import React, { useEffect, useState } from 'react'
import api from '@/api'
import action from '@/action'

const Gas = () => {
  useEffect(() => {
    action.onGlobalStateChange((state) => {
      setSuid(state?.globalLocation?.SUID)
      api
        .getGases({
          page,
          limit,
          meter_num: gasNumber,
          start_time: queryTime[0],
          end_time: queryTime[1],
          SUID: state?.globalLocation?.SUID,
        })
        .then((res) => {
          setData(res)
        })
    }, true)
  }, [])

注意： 主应用的action和子应用的action不是同一个文件，除此之外，我们还可以给子应用添加自己的store管理自己的数据，刷新情况下数据还存在需要redux-persist第三方插件做个固定。