问如何重构Redux-Toolkit、createAsyncThunk和extraReducers中的重复代码？
EN

Stack Overflow用户

提问于 2021-06-29 18:35:14

回答 1查看 164关注 0票数 0

这是我第一次在React项目中使用Redux。我在这里添加的代码用于基于cookie的身份验证。我担心这里的所有内容都是正确的格式。这里似乎有很多重复的代码。尤其是对于createSlice部分中的挂起和拒绝状态。我如何重构这段代码?在这种情况下，正确的编码风格是什么？

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

import API from "../API";

// Register user:

export const signup = createAsyncThunk(
  "user/signup",
  async (userInfo, { rejectWithValue }) => {
    try {
      const { data } = await API.post("/signup", userInfo);
      return data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

// Login:
export const login = createAsyncThunk(
  "user/login",
  async (loginInfo, { rejectWithValue }) => {
    try {
      const { data } = await API.post("/login", loginInfo);
      return data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

// Logout:
export const logout = createAsyncThunk(
  "user/logout",
  async (args, { rejectWithValue }) => {
    try {
      const { data } = await API.get("/logout");
      return data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

// Chek-Auth:
export const isAuthenticated = createAsyncThunk(
  "user/isAuthenticated",
  async (args, { rejectWithValue }) => {
    try {
      const { data } = await API.get("/check-auth");
      return data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

// createSlice portion is here:
export const userSlice = createSlice({
  name: "user",
  initialState: {
    loading: true,
    isLoggedIn: false,
    message: "",
    user: null,
    error: null,
  },
  reducers: {},
  extraReducers: {
    [signup.pending]: (state, action) => {
      state.loading = true;
    },
    [signup.fulfilled]: (state, action) => {
      state.loading = false;
      state.isLoggedIn = true;
      state.message = action.payload.message;
      state.user = action.payload.user;
      state.error = null;
    },
    [signup.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload || action.error;
    },
    [login.pending]: (state, action) => {
      state.loading = true;
    },
    [login.fulfilled]: (state, action) => {
      state.loading = false;
      state.isLoggedIn = true;
      state.message = action.payload.message;
      state.user = action.payload.user;
      state.error = null;
    },
    [login.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload || action.error;
    },
    [logout.pending]: (state, action) => {
      state.loading = true;
    },
    [logout.fulfilled]: (state, action) => {
      state.loading = false;
      state.isLoggedIn = false;
      state.message = action.payload.message;
      state.user = null;
    },
    [logout.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload || action.error;
    },
    [isAuthenticated.pending]: (state, action) => {
      state.loading = true;
    },
    [isAuthenticated.fulfilled]: (state, action) => {
      state.loading = false;
      state.isLoggedIn = true;
      state.message = action.payload.message;
      state.user = action.payload.user;
    },
    [isAuthenticated.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload || action.error;
    },
  },
});

// export const {  } = userSlice.actions;

export default userSlice.reducer;

reactjs

express

redux

react-redux

redux-toolkit

腾讯特效SDK 2.5折起

美颜基础/原子能力套餐低至1500元/月，提供丰富的美化能力，支持全平台集成

回答 1

Stack Overflow用户

发布于 2021-06-29 21:37:45

我们通常建议使用构建器表示法，而不是对象表示法。这使得这样的事情变得更容易：

extraReducers: builder => {
  for (const thunk in [signup, login, logout, isAuthenticated]) {
    builder.addCase(thunk.pending, (state) => { state.loading = true })
    builder.addCase(thunk.rejected, (state, action) => { 
      state.loading = false;
      state.error = action.payload || action.error;
    })
  }
}