迁移到 Redux-Toolkit 2.0 和 Redux 5.0 后，我在 extraReducer 和 createSlice 中遇到了一些困难

Question

这是我的

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，但错误表明我需要将我的代码与新版本相匹配。

Answer 1

您的代码中有相当多令人困惑的无效 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.
  },
});

Answer 2

问题

这里的问题是您无意中使用了 Javascript 的 Comma Operator。

逗号 (

,

) 运算符计算其每个操作数（从左到右） 右）并返回最后一个操作数的值。这是常见的 用于为 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
  },
});

解决方案

RTK 切片的

extraReducers

属性是一个函数，您应该从

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