Вот мой formSlice, и я получаю «Ожидается выражение» после закрывающих скобок builder и функции стрелки.
import { createAsyncThunk, createReducer, createSlice } from "@reduxjs/toolkit";
import axios from "axios";
export const getform = createAsyncThunk("form/getForm", async () => {
try {
const result = await axios.get("http://localhost:5000/autoroute/");
return result.data;
} catch (error) {}
});
export const addform = createAsyncThunk("form/add", async (form) => {
try {
const result = await axios.post("http://localhost:5000/autoroute/", form);
return result.data;
} catch (error) {}
});
export const deleteform = createAsyncThunk("form/deleteForm", async (id) => {
try {
const result = await axios.delete(`http://localhost:5000/autoroute/${id}`);
return result.data;
} catch (error) {}
});
export const updateform = createAsyncThunk(
"form/deleteForm",
async ({ id, form }) => {
try {
const result = await axios.put(
`http://localhost:5000/autoroute/${id}`,
form
);
return result.data;
} catch (error) {}
}
);
createReducer(initialState, builder = {
form: [],
status: null,
});
export const formSlice = createSlice({
name: "form",
initialState,
reducers: {},
extraReducers: builder =>{
builder.getform(pending, (state) => {
state.status = "pending";
}),
builder.getform(pending, (state) => {
state.status = "success";
}),
builder.getform(pending, (state) => {
state.status = "fail";
}),
},
});
// Action creators are generated for each case reducer function
// export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default formSlice.reducer;
После закрывающей скобки builder в extraReducers написано «ожидается выражение». Я работал над более старой версией Redux-Toolkit, но ошибка показала мне, что мне нужно сопоставить свой код с более новой версией.
🤔 А знаете ли вы, что...
React Router - это библиотека для управления маршрутизацией в приложениях React.
В вашем коде довольно много запутанного невалидного JavaScript, исправлены соответствующие части:
// I don't know what you wanted to do with createReducer here but it seems you wanted to declare an initial state?
const initialState = {
form: [],
status: null,
};
export const formSlice = createSlice({
name: "form",
initialState,
reducers: {},
extraReducers: builder => {
// instead of builder.getform(pending
builder.addCase(getform.pending, (state) => {
state.status = "pending";
}); // you can either do a semicolon here, or nothing, but not a comma
// this is not an object definition, but a function body.
},
});
Проблема в том, что вам удалось случайно использовать оператор запятой в Javascript.
Оператор запятая (
,) оценивает каждый из своих операндов (слева направо). вправо) и возвращает значение последнего операнда. Это обычно используется для предоставления нескольких средств обновления для цикла for.
Другими словами, компилятор/движок Javascript ожидает другое выражение после последней/конечной запятой.
export const formSlice = createSlice({
name: "form",
initialState,
reducers: {},
extraReducers: builder =>{
builder.getform(pending, (state) => { // <-- expression
state.status = "pending";
}),
builder.getform(pending, (state) => { // <-- expression
state.status = "success";
}),
builder.getform(pending, (state) => { // <-- expression
state.status = "fail";
}),
// <-- missing expected expression
},
});
Свойство extraReducers среза RTK является функцией, и вам следует либо создавать цепочку из объекта builder, либо явно определять каждый случай.
У объекта builder есть функция addCase, которую вам также следует использовать, builder.getform не является функцией и может вызвать ошибку.
Ожидаемые варианты использования:
export const formSlice = createSlice({
name: "form",
initialState,
extraReducers: builder => {
builder
.addCase(getform.pending, (state) => {
state.status = "pending";
})
.addCase(getform.fulfilled, (state) => {
state.status = "success";
})
.addCase(getform.rejected, (state) => {
state.status = "fail";
});
},
});
или
export const formSlice = createSlice({
name: "form",
initialState,
extraReducers: builder =>{
builder.addCase(getform.pending, (state) => {
state.status = "pending";
});
builder.addCase(getform.fulfilled, (state) => {
state.status = "success";
});
builder.addCase(getform.rejected, (state) => {
state.status = "fail";
});
},
});