使用 RTK 查询如何在不调用服务器的情况下将数据添加到我的状态？答案

【问题标题】：Using RTK query how do I add data to my state without a call to the server?使用 RTK 查询如何在不调用服务器的情况下将数据添加到我的状态？
【发布时间】：2022-12-04 19:09:14
【问题描述】：

我正在使用 RTK 查询构建我的第一个应用程序。我需要在我的标题中设置我的授权令牌。它存储在 cookie 中，但无法从 apiSlice 访问它们，这意味着我需要将令牌存储在我设置标题时可以访问的状态中。

当应用程序首次启动时，我从我的 cookie 中获取令牌，但我不明白如何将它存储在我的状态中，现在我使用 RTK 查询？我没有进行任何 API 调用，我已经有了数据。我如何将它存储在我的切片中？

【问题讨论】：

标签： reactjs redux redux-toolkit rtk-query

【解决方案1】：

要在不使用 RTK 查询调用服务器的情况下将数据添加到您的状态，您可以使用切片的 update() 方法。此方法允许您在不分派操作的情况下使用新数据更新状态。

例如，如果你有一个名为“auth”的切片，它有一个名为“token”的属性，你想用你的授权令牌更新它，你可以使用以下代码：

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    token: null
  },
  reducers: {
    // Add your reducer functions here
  }
});

// Get your authorization token from the cookie
const token = getTokenFromCookie();

// Update the state with the new token
authSlice.update(state => {
  state.token = token;
  return state;
});

这将使用新令牌更新您的状态，而无需调用服务器。然后，您可以使用切片的 select() 方法访问您状态下的令牌。

const token = authSlice.select(state => state.token);

然后，您可以使用令牌来设置 API 请求的标头。

const headers = {
  Authorization: `Bearer ${token}`
};

通过使用切片的 update() 方法，您可以轻松地将数据添加到您的状态，而无需调用服务器。

【讨论】：