1

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

现在，我可以在哪里以及如何使用我的快餐栏从服务器获取状态，无论它是否获取！这只是我的项目的模型。

4

1 回答 1

2

notistack 文档中有一个指向redux 实现示例的链接。看它。

简短的摘要：

  • 您需要创建自己的动作创建者，该动作创建者将在您的动作创建者中分派fetchData。这个动作创建者将发送ENQUEUE_SNACKBAR带有显示通知所需的所有必要信息的动作类型（参见示例中的 actions.js）。
  • 你的 reducer 会将此通知存储在一个数组中，以允许同时发出多个通知（参见示例中的 reducer.js）。
  • 您需要创建一个新组件来显示您存储的通知（参见示例中的 Notifier.js）。在这个组件中，您enqueueSnackbar将从 notistack 调用自己的组件。并且不要忘记REMOVE_SNACKBAR在 notistack 处理程序中调度类型的操作以从您的 redux 存储中删除通知onExited（也可以查看 Notifier.js 示例）。
于 2020-07-06T12:42:15.207 回答