Question 367391 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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.
  },
});
    Login or Signup to reply.
  2. 0

    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";
    });
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search