我如何将 notistick/(any snackbar) 与 redux-toolkit 一起使用并做出反应？

Question

我想要建议我应该在哪里以及如何编写我的小吃店，所以它应该在获取数据时或在获取时出现任何错误时发出通知。有很多相同的例子，但我的情况因文件夹结构而不同。例子： 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>
)

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

Answer 1

有一个link到redux implementation example in notistack documentation。看看吧。

简短摘要：

您需要创建自己的动作创建器，它将在您的动作创建器中调度 fetchData。此动作创建者将派发 ENQUEUE_SNACKBAR 类型的动作，其中包含显示通知所需的所有必要信息（参见示例中的 actions.js）。
您的减速器会将此通知存储在一个数组中，以允许多个通知同时出现（请参阅示例中的 reducer.js）。
您需要创建一个新组件来显示您存储的通知（参见 Notifier.js 示例）。在此组件中，您将从 notistack 调用自己的 enqueueSnackbar。并且不要忘记在 notistack onExited 处理程序中调度 REMOVE_SNACKBAR 类型的操作以从您的 redux 存储中删除通知（另请参阅示例中的 Notifier.js）。

我如何将 notistick/(any snackbar) 与 redux-toolkit 一起使用并做出反应？

How can I use notistick/(any snackbar) with redux-toolkit and react?

reactjs

redux

material-ui

redux-toolkit