在redux-toolkit中使用createEntityAdapter时如何处理错误？

cxfofazt 于 2023-08-05 发布在其他

关注(0)|答案(1)|浏览(94)

我有个问题所以，我是新的React，现在我在一个项目中工作。我使用redux-toolkit来处理我的状态，我还使用createEntityAdapter来设置初始状态，问题是这样的：当使用createEntityAdapter发生错误时，如何处理错误。还是我必须创建全局错误状态来处理来自asyncThunk的错误？使用全局错误状态好吗？
下面是我的代码：

import { createSlice, createAsyncThunk ,createEntityAdapter } from '@reduxjs/toolkit'

export const searchRecipe = createAsyncThunk('recipes/SearchRecipe', async (title, { rejectWithValue }) => {
  try {
    const response = await axios.get(`/recipes?title=${title}`)
    return response?.data?.data
  } catch(err) {
    return rejectWithValue(err?.response?.data?.message || 'Something went wrong')
  }
})

const recipeAdapter = createEntityAdapter({
  selectId: (recipe) => recipe.recipe_id
})

const recipeSlice = createSlice({
  name: 'recipes',
  initialState: recipeAdapter.getInitialState(),
  extraReducers: {
    [getRecipes.fulfilled]: (state, action) => {
      recipeAdapter.setAll(state, action.payload)
    }
  }
})

export const recipeSelectors = recipeAdapter.getSelectors((state) => state.recipes)
export default recipeSlice.reducer

字符串
最后但并非最不重要。是否有更好的解决方案使用redux-toolkit（资源我可以阅读或观看）谢谢

redux

来源：https://stackoverflow.com/questions/73623592/how-to-handle-errors-when-using-createentityadapter-in-redux-toolkit

1条答案

按热度按时间

qltillow1#

大概是这样的：

import { createSlice, PayloadAction, createEntityAdapter } from "@reduxjs/toolkit";
import { PointType } from "../Types/PointType";
import { ErrorType } from "../Types/ErrorType";

type InitialStateType = {
  data: PointType;
  error: ErrorType;
};

export const pointsAdapter = createEntityAdapter<InitialStateType>({
  selectId: point => point.data.Id,
  sortComparer: (a, b) => a.data.Subject.localeCompare(b.data.Subject),
});

const initialState = pointsAdapter.getInitialState({
  data: [],
  error: { message: "" },
});

const pointSlice = createSlice({
  name: "pointsSlice",
  initialState,
  reducers: {
    fetchPointsSuccess: (state, action) => {
      pointsAdapter.setAll(state, action.payload);
    },
    fetchSinglePointSuccsess: (state, action) => {
      pointsAdapter.updateOne(state, action.payload);
    },
    fetchPointsFailure: state => {
      state.error.message = "Can not fetch points";
    },
    updatePointsFailure: state => {
      state.error.message = "Can not update point";
    },
  },
});

export const { fetchPointsSuccess, fetchPointsFailure, updatePointsFailure, fetchSinglePointSuccsess } =
  pointSlice.actions;
export const pointReducer = pointSlice.reducer;

字符串

赞(0）回复(0）举报 2023-08-05

我来回答

在redux-toolkit中使用createEntityAdapter时如何处理错误？

1条答案

相关问题

热门标签

最新问答