Reactjs 如何将notistick/（任何snackbar）与redux工具包结合使用并做出反应？

我想知道我应该在哪里以及如何编写snackbar，所以如果数据被提取或者提取时出现任何错误，它应该发出通知。 有许多相同的例子，但我的情况是不同的，因为文件夹结构。 例子： src/api.js

  const API = axios.create({
  baseURL: `/`,
});
 export async function fetchData(data) {
  try {
    const res = await API.get(`/endpoint`);
    return res.data;
  } catch (err) {
    throw err;
  }
}

src/slice.js

import * as REQUESTS from "./api.js";
const initialState = {
  data: []
}

export const dataSlice= createSlice({
  name: "dataSlice",
  initialState,
  reducers: {
    setData(state,action) {
      const { data } = action.payload;
      state.data = data.map((item) => item);
    },
}
})

export const { setData} = dataSlice.actions

//THUNK
export const fetchData= () => async (dispatch) => {
  try {
    
    const { Data,Err } = await REQUESTS.fetchData();
     //If no err snackbar/toast should show fetched successfully.
     // I called snackbar here but snackbar library gives an error, says it should called from within a component.

  } catch (error) {
    console.log(error);
  }
};

src/app.jsx

 //USING USE SELECTION GET DATA FROM STORE
const displayData= props => (
    <h1>{data}</h1>
)

//使用选择从存储获取数据
const displayData=props=>(
{data}
)

现在，我在哪里以及如何使用snackbar从服务器获取状态（无论是否获取）！ 这只是我项目的一个模型。

中有一个指向的链接。看看它

小结：

• 您需要创建自己的action creator，它将在action creator

  fetchData

  中调度。此操作创建者将分派

  ENQUEUE_SNACKBAR

  类型的操作，以及显示通知所需的所有必要信息（请参见示例中的actions.js）
• 您的reducer将此通知存储在一个数组中，以允许多个通知同时出现（请参见示例中的reducer.js）
• 您需要创建一个新组件来显示存储的通知（请参见示例中的Notifier.js）。在这个组件中，您将从notistack调用自己的

  enqueueSnackbar

  。另外，不要忘记在notistack

  onExited

  处理程序中调度类型为

  REMOVE\u SNACKBAR

  的操作，以从redux存储中删除通知（请参见示例中的Notifier.js）