如何在基于Redux的React应用中全局复用Chakra UI Toast组件

既然你已经在用Redux，完全可以用它来统一管理Toast的状态，彻底解决prop drilling的问题，具体实现步骤如下：

1. 创建Toast状态管理Slice #

用Redux Toolkit创建专门管理Toast状态的slice，包含显示状态、消息内容、样式类型（对应不同颜色）：

// src/features/toast/toastSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  isVisible: false,
  message: '',
  type: 'success', // 可选值：success/error/warning
};

const toastSlice = createSlice({
  name: 'toast',
  initialState,
  reducers: {
    showToast: (state, action) => {
      state.isVisible = true;
      state.message = action.payload.message;
      state.type = action.payload.type || 'success';
    },
    hideToast: (state) => {
      state.isVisible = false;
      state.message = '';
      state.type = 'success';
    },
  },
});

export const { showToast, hideToast } = toastSlice.actions;
export default toastSlice.reducer;

2. 将Toast Slice添加到Redux Store #

在你的store配置文件中，把这个slice的reducer加入全局store：

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import toastReducer from '../features/toast/toastSlice';

export const store = configureStore({
  reducer: {
    // 其他业务reducer...
    toast: toastReducer,
  },
});

3. 封装全局Toast组件 #

编写Toast组件，通过useSelector获取Redux状态，自动处理隐藏逻辑（比如3秒后自动消失），并根据type匹配对应颜色样式：

// src/components/Toast.jsx
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { hideToast } from '../features/toast/toastSlice';

const Toast = () => {
  const { isVisible, message, type } = useSelector((state) => state.toast);
  const dispatch = useDispatch();

  // 自动隐藏Toast
  useEffect(() => {
    if (isVisible) {
      const timer = setTimeout(() => {
        dispatch(hideToast());
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [isVisible, dispatch]);

  // 根据type设置背景色
  const getBgColor = () => {
    switch (type) {
      case 'error':
        return '#ef4444';
      case 'warning':
        return '#fbbf24';
      default:
        return '#10b981';
    }
  };

  if (!isVisible) return null;

  return (
    <div 
      style={{
        position: 'fixed',
        top: '20px',
        right: '20px',
        padding: '12px 24px',
        borderRadius: '4px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        backgroundColor: getBgColor(),
        color: type === 'warning' ? '#1f2937' : 'white',
        zIndex: 9999,
        cursor: 'pointer',
      }}
      onClick={() => dispatch(hideToast())}
    >
      {message}
    </div>
  );
};

export default Toast;

4. 在根组件挂载Toast #

把Toast组件放在App.jsx的最外层，确保它能覆盖整个应用界面：

// src/App.jsx
import Toast from './components/Toast';
import { Provider } from 'react-redux';
import { store } from './app/store';

function App() {
  return (
    <Provider store={store}>
      {/* 你的其他应用组件（路由、页面等） */}
      <div className="App">
        {/* ... */}
      </div>
      {/* 全局Toast，放在根组件最外层 */}
      <Toast />
    </Provider>
  );
}

export default App;

5. 在任意组件中触发Toast #

现在不管哪个组件需要显示Toast，直接dispatch对应的action即可，完全不需要传递props：

// src/components/RequestComponent.jsx
import { useDispatch } from 'react-redux';
import { showToast } from '../features/toast/toastSlice';

const RequestComponent = () => {
  const dispatch = useDispatch();

  const handleSubmit = async () => {
    try {
      // 发起请求逻辑
      await fetch('/api/submit');
      dispatch(showToast({ message: '提交成功！', type: 'success' }));
    } catch (err) {
      dispatch(showToast({ message: '提交失败，请重试', type: 'error' }));
    }
  };

  return (
    <button onClick={handleSubmit}>提交请求</button>
  );
};

export default RequestComponent;

这样整个应用只需要维护一个Toast组件，所有组件都能通过Redux触发它的显示/隐藏，彻底解决了prop drilling的问题。

内容的提问来源于stack exchange，提问作者Snehil Agrahari