标签: redux-toolkit

我是 redux 工具包的新手。在这里，我试图在清除搜索输入后返回之前的状态。这是我的减速机，

const dataSlice = createSlice({
  name: "data",
  initialState: {
    datas: [],
  },
  reducers: {
    search: (state, action) => {
      console.log(action.payload);
      if (action.payload) {
        state.datas = state.datas.filter((data) => {
          return data.mission_name.toLowerCase().includes(action.payload);
        });
      }
    },
  },
  extraReducers: {
    [dataFetch.pending]: (state, action) => {
      state.loading = true;
    },
    [dataFetch.fulfilled]: (state, action) => {
      state.datas = action.payload;
      state.loading = false;
    },
    [dataFetch.rejected]: (state, action) => {
      state.error = action.payload;
    },
  },
});

当我调度搜索操作时，它返回我的新状态，但是当我清除搜索字段时，它返回一个空数组，但我想返回之前的状态。我对此很陌生。提前致谢。

我需要一些帮助来修改我的减速器。我正在使用 Redux Toolkit，并且在其中一个状态切片中我有一个带有一些分组设置的对象：

initialState: {
    ...
    userSettings: {mode: 2, subscription: false, setting3: 'text', setting4: 'another text'},
    ...
}

我的减速器是：

setUserSettings: (state, action) => {
    state.userSettings: action.payload
}

在组件的不同部分，我会更新 userSettings 对象中的各个设置：

dispatch(setUserSettings({ mode: 4 }))

在另一个地方：

dispatch(setUserSettings({ setting3: 'some other text'})

我该如何修改减速器才能做到这一点？谢谢

伙计们，如何在 redux 工具包中将对象追加到空数组中？我在我的切片中设置了一个 currentTimeOfServices:[] ，然后我用有效负载调度一个动作 dispatch(userActions.getCurrentTime({ startTime: startTime, name: item })); 在我的 getCurrenTtime 减速器中我不明白如何附加此项目。

getCurrentTime: (state, action) => {
      state.currentTimeOfServices = [
        ...state.currentTimeOfServices,
        { startTime: action.payload.startTime, name: action.payload.name },
      ];
    }

这是错误的，我知道这一点，但我想知道如何向此 currentTimeOfServices 空数组添加/附加对象？

我有一个反应应用程序，在初始加载时会执行大量 fetch 调用来检索一些数据。

我使用 redux 和 redux 工具包来管理状态

正如您所看到的，在我的 redux 切片中，有很多链接的 addCase 调用，它们只是处理设置加载状态以获取loading或failed

有没有办法避免这种情况并使我的代码更简洁？一种制作单个 addCase 的方法，该 addCase 处理将加载状态设置loading为所有获取以及同样的情况failed？

export const dashboardSlice = createSlice({
  name: "dashboard",
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      //Co2Emission
      .addCase(fetchCO2EmissionData.pending, (state, action) => {
        state.co2.status = "loading";
      })
      .addCase(fetchCO2EmissionData.fulfilled, (state, action) => {
        state.co2.status = "succeeded";
        //We are just using the CPU data from first pod in the array. When when KG-121 it should just be state.Co2DiagramData = action.payload.values
        console.log(action.payload[0]); …

试图找出实现以下目标的最佳方法：

1. API 通过createApi
2. 验证切片通过createSlice
3. 当 API 收到 401 时清除 redux auth 状态。

前2个没问题！但问题是当我需要向 API 添加拦截器时（无效的身份验证 - 清除本地身份验证状态）：

// api.ts
import authSlice from './authSlice';
const baseQueryWithReauth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
  args,
  api,
  extraOptions
) => {
  const result = await baseQuery(args, api, extraOptions)

  if (result.error?.status === 401) {
    api.dispatch(authSlice.actions.clearAuth())
  }

  return result
}

export const api = createApi({
  reducerPath: API_REDUCER_KEY,
  baseQuery: baseQueryWithReauth,
  endpoints: () => ({}),
})

// authService.ts
import { User } from '../../models/User' …

我是 redux 工具包的新手，我的目标是如果尝试登录的用户不是注册会员，则不让仪表板呈现。如果用户名或密码无效，我会从后端发送 500 错误，但效果很好。即使 api 响应为 500，extraReducers 也不会拒绝案例，而是转到已完成案例。我的期望是，如果 api 给出错误，它将转到拒绝案例。下面是我的切片，

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

export const currentUser = localStorage.getItem("userInfo");

const initialState = {
  currentUser: currentUser
    ? currentUser
    : {
        email: "",
        password: "",
        name: "",
        pic: "",
        confirmPassword: "",
      },
  status: null,
  isLoggedIn: currentUser ? true : false,
  userInfoFromStorage: "",
};

//login action
export const authUser = createAsyncThunk("users/authUser", async (data) => {
  const res = await axios.post("http://localhost:3010/api/users/login", data);
  return res.data;
});

//register …

所以我正在对Blur 进行表单验证，并使用RTK 查询来调用api。我面临的问题是，在第一次 API 调用时，isSuccess即使 API 返回状态为 200，也会返回 false

const [validateUser, { data, isSuccess }] = authAPI.useValidateUserMutation();
  const validateUserDetails = (name, event) => {
    event.preventDefault();
    if (event.target.value !== "") {
      let fieldData = {
        fieldName: name,
        value: event.target.value,
      };
      validateUser(fieldData);
      console.log("Is Success: ", isSuccess);
      if (isSuccess && data.errors.status !== 200) {
        console.log(data);
      }
    } else {
    }
  };

第一次验证时

即使状态是 API 状态是 200 成功也会返回 false 但现在如果我再次执行它将返回 true 有办法解决这个问题吗？

我当前的场景中有三个API 定义。

• 团体
• 小组成员
• 团体邀请函

这些路由彼此相关，因为接受群组邀请将使用户拥有的群组列表无效。因此，我在相同的 API 下定义了它们，因为它们需要使共享标签无效。

然而，这会导致文件变得相当臃肿，因为每个定义都有自己与之关联的端点。阅读Code Splitting with RTK Query的文档建议使用injectEndpoints。这看起来适合我的目的，但我的文档没有我可以找到的示例来说明如何使用多个“子”端点来实现它。

我有几个问题；

1. 如果我要利用injectEndpoints 分别通过GroupInvitations 和GroupMembers 扩展Groups API，那么哪个API 应该包含在对configureScore 的调用中？
2. 有没有办法将两个端点同时注入到组中，从而产生一个组合的 Api？

如何在react @reduxjs/toolkit的createSlice中使用钩子将数据保存在localStorage中每当我更改主题时，我想将数据保存在localStorage中。我知道这可以直接使用 js 代码完成，但我在 useLocalStorage 挂钩方面遇到问题。

import { createSlice } from "@reduxjs/toolkit";
import useLocalStorage from "../hooks/useLocalStorage";

const initialState = {
    theme: true
}

const [settings, setSettings] = useLocalStorage("settings", initialState);


export const settingsSlice = createSlice({
    name: "theme",
    initialState: { value: initialState },
    reducers: {
        setSettings: (state, action) => {
            state.value = action.payload;
        },
        toggleTheme: (state) => {
            const temp = { ...state.value, theme: !state.value.theme };

            //save in localStorage
            setSettings(temp);

            state.value = temp;
        },
    },
});

export const { toggleTheme } = …

如果用户未注册，API 会抛出 401。但即使有错误，extraReducers 也会执行已完成的情况。500 和其他错误也会发生这种情况。

额外减速器

  extraReducers: (builder) => {
    builder
      .addCase(login.pending, function (state) {
        console.log("pending");
        state.isLoading = true;
      })
      .addCase(login.fulfilled, (state, action) => {
        console.log("fullfield");
        state.isLoading = false;
        state.user = action.payload;
        state.isAuthenticated = true;
      })
      .addCase(login.rejected, (state, action) => {
        console.log("rejected");
        console.log(action.payload);
        state.isLoading = false;
        state.error = true;
        state.message = action.payload;
        state.user = null;
      });
  }

asyncThunk登录方法

export const login = createAsyncThunk("auth/login", async (user, thunkAPI) => {
  try {
    let user = await authService.login(user);
    return user;
  } catch (error) …