After migrating to Redux-Toolkit 2.0 and Redux 5.0 I am struggling in the extraReducer and createSlice a bit

Question

Here is my formSlice and I am getting "Expression expected" after the closing brackets of the builder and the arrow function.

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;

It says "expression expected" after the closing bracket builder of the extraReducers. I was working on an older version of the Redux-Toolkit but the error showed me that I need to match my code with the newer version.

Answer 1

There is quite a bit of confusing non-valida JavaScript in your code, here are relevant parts corrected:

// 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.
  },
});

Answer 2

Issue

The issue here is that you have managed to use Javascript's Comma Operator unintentionally.

The comma (,) operator evaluates each of its operands (from left to right) and returns the value of the last operand. This is commonly used to provide multiple updaters to a for loop's afterthought.

In other words, the Javascript compiler/engine is expecting another expression after the last/trailing comma.

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
  },
});

Solution

The RTK slice's extraReducers property is a function and you should either be chaining from the builder object or explicitly defining each case.

The builder object has an addCase function that you should be using as well, builder.getform is not a function and would throw an error.

Expected use cases:

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";
      });
  },
});

or

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";
    });
  },
});