全局状态管理当时某个状态的时候弹出样式框怎么写 ts文件

全局状态管理通常涉及到 Redux、MobX 或者 Vue.js 的Vuex 等状态管理库。假设你在使用 TypeScript 和一个基于 Redux 的状态管理框架，比如 `react-redux`，你可以这样做：

首先，在Redux中创建一个用于存储状态的action creator 和 reducer，例如一个名为 `showModal` 的状态变化：

// actions.ts
export const showModal = (payload: { type: string; data?: any }) => ({
  type: 'SHOW_MODAL',
  payload,
});

// reducers/modalsReducer.ts
const initialState = {
  isOpen: false,
};

const modalsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SHOW_MODAL':
      return { ...state, isOpen: true, modalData: action.payload };
    // 添加其他关闭modal的case
    default:
      return state;
  }
};

然后，在组件里使用 `useDispatch` 获取action creator，并监听store的变化：

import { useSelector, useDispatch } from 'react-redux';
import { showModal } from './actions';

function MyComponent() {
  const dispatch = useDispatch();
  const { isOpen, modalData } = useSelector((state) => state.modals);

  const handleClick = () => {
    dispatch(showModal({ type: 'MODAL_TYPE', data: { styleBox: 'customStyle' }})); // 根据需要传递数据
  };

  return (
    <div>
      {isOpen && <CustomModal styleBox={modalData?.styleBox || ''} />}
      <button onClick={handleClick}>Show Modal</button>
    </div>
  );
}

在这个例子中，当按钮点击时会发送一个action打开modal，`CustomModal` 组件会根据 `modalData.styleBox` 属性来显示相应的样式框。

注意：这里只是一个基础示例，实际项目中你可能还需要处理更复杂的场景，如异步操作、错误处理等。同时，确保你在组件之间解耦，避免直接修改全局状态。