代码之家 › 专栏 › 技术社区 › Hannachi

在迁移到ReduxToolKit 2.0和Redux 5.0之后,我在extraReducer和createSlice中有点挣扎(我还是个初学者)

redux-toolkit react-redux reactjs

0

Hannachi · 技术社区 · 1 年前

这是我的formSlice,我正在获取生成器和箭头函数的右括号后所需的表达式

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;

它说,在额外减速器的闭合括号构建器之后预期的表达式我正在使用旧版本的reduxtoolkit,但错误表明我需要将代码与新版本匹配

1 回复 | 直到 1 年前

1

0

phry 1 年前

您的代码中有很多令人困惑的非valida 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.
  },
});