首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux Toolkit - GET从不调用,OPTIONS从不返回

Redux Toolkit 是一个官方推荐的用于简化 Redux 开发的工具集。它提供了一些工具函数和最佳实践,以减少样板代码并提高开发效率。当你遇到 GET 请求从不调用,OPTIONS 请求从不返回的问题时,可能是由于以下几个原因:

基础概念

  • Redux Toolkit: 是 Redux 的官方工具集,旨在简化 Redux 的使用。
  • GET 请求: 用于请求服务器发送数据。
  • OPTIONS 请求: 是一个预检请求,用于确定实际请求是否安全可接受。

可能的原因

  1. CORS 问题: 浏览器出于安全考虑,会先发送一个 OPTIONS 请求来询问服务器是否允许该跨域请求。
  2. 中间件配置问题: Redux Toolkit 使用中间件来处理异步操作,如 Redux Thunk 或 Redux Saga。
  3. API 端点问题: 可能是 API 端点配置错误或服务器端没有正确处理请求。

解决方法

  1. 检查 CORS 配置: 确保服务器端正确配置了 CORS,允许来自你的前端应用的请求。例如,在 Node.js 中可以使用 cors 中间件:
  2. 检查 CORS 配置: 确保服务器端正确配置了 CORS,允许来自你的前端应用的请求。例如,在 Node.js 中可以使用 cors 中间件:
  3. 检查中间件配置: 确保在 Redux store 中正确配置了处理异步操作的中间件,例如 Redux Thunk:
  4. 检查中间件配置: 确保在 Redux store 中正确配置了处理异步操作的中间件,例如 Redux Thunk:
  5. 检查 API 端点: 确保你的 API 端点是正确的,并且服务器端能够正确处理 GET 请求。例如:
  6. 检查 API 端点: 确保你的 API 端点是正确的,并且服务器端能够正确处理 GET 请求。例如:
  7. 调试工具: 使用浏览器的开发者工具来检查网络请求,查看 OPTIONSGET 请求的状态码和响应内容。

示例代码

以下是一个简单的示例,展示如何在 Redux Toolkit 中处理异步 GET 请求:

代码语言:txt
复制
// store.js
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: [...getDefaultMiddleware(), thunk],
});

export default store;

// actions.js
export const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_DATA_REQUEST' });
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAILURE', error });
  }
};

// reducers.js
const initialState = {
  data: [],
  loading: false,
  error: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

export default dataReducer;

参考链接

通过以上步骤,你应该能够诊断并解决 GET 请求从不调用,OPTIONS 请求从不返回的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • redux redux-toolkit 与 rematch 对比总结

    使用 redux,在界面展示异常的时候,只需要去 reducer 中特定的 action 中加日志,看是哪里调用的、参数是什么。 这样做的代价是:限定了修改、获取状态的实现方式,变得繁琐。.../redux-toolkit https://redux-toolkit-cn.netlify.app/introduction/quick-start "@reduxjs/toolkit":..."^1.4.0", redux 官方推荐通过 toolkit 使用 redux,以减少模板代码: Redux Toolkit 的本质是提供了一些工具函数,简化纯手写 Redux 代码的冗余逻辑,其中最重要的两个工具函数是...: configureStore:管理所有全局状态的函数,它的返回值是一个 Store 对象; createSlice:管理分片全局状态的函数,其返回值是一个分片对象,该对象上最重要的两个属性是...它和 redux-toolkit 非常相似,它的 model 基本上可以等同于 redux-toolkit 的 slice: 不同点在于,rematch 支持多个 store。

    2.1K60

    React?设计模式?

    Reqres[2] 支持了GET、POST、PUT、DELETE 模拟我们真实的接口返回格式 publicapis[3] 可以获取有关水果图片、营养信息,甚至是随机水果事实的数据 randomuser[...options: 一个可选的配置对象,用于定制请求。 请求配置选项 (options) 的常见属性 「method」: 请求方法,例如 GET、POST 等。...如果相关联的 AbortController 被中止(通过调用 controller.abort()),请求将被中断。...其实,如果作为演示效果来讲,Redux的Reducer来进行案例分析,但是呢,用过Redux的朋友都知道,它的样板代码太多。所以,我们选择比较火的使用Redux Toolkit来说明效果。...使用 Redux Toolkit 中的 createSlice 函数创建一个 slice : // authSlice.js import { createSlice } from "@reduxjs/

    26310

    深入理解redux

    保证 reducer 是纯函数那就不应该直接改变原有的 state,而是返回一个新的 state,当传递相同的参数时,每次调用返回结果应该是一致的,所以也要避免使用 Date.now() 或 Math.random...最后,调用 dispatch({}) 来初始化状态,并返回包含 dispatch、subscribe和getState 方法的对象 中间件 redux 还有较为强大的一点就是中间件,如果你对服务端相关的框架有一定的了解...,如果你要在 react 项目中使用 redux,那就 @reduxjs/toolkit react-redux 之前我们没说到 redux toolkitredux 我们也看到了,在实际业务中编写...reducer 又臭又长,而 toolkit 就是在 redux 的基础上能够简化了大多数 Redux 任务,避免了常见错误,使得编写 Redux 应用程序更容易了,可以把它称为 redux 的最佳实践...使用 redux toolkit 可以更容易地编写可维护和可扩展的 redux 代码,并减少样板代码的数量

    70350

    Vite2+React+TypeScript:搭建企业级轻量框架实践

    接下来,为了让大家更好理解本项目工程化的思路,本文会按照以下关键词去逐步研读: React Typescript Vite Redux Toolkit mockjs vite-plugin-mock Ant...Redux Toolkit React的状态管理库历来就是轮子重灾区,各种设计模式层出不穷,这里就不多介绍了。...本项目选用Redux Toolkit作为项目管理,一来,它在众多产品中算是比较优秀的一个框架,使用起来也简单、结构清晰;二来,它封装了immer,写起异步逻辑挺方便的,用起来也可以应对大多数情景。...retcode和message; 改写AxiosInstance的ts类型(由AxiosPromise→Promise),矫正调用方能正确判断返回数据的类型; 设置1个初始化函数init(),.../request'; userInfo: (options?

    1.8K10

    Vite2+React+TypeScript:搭建企业级轻量框架实践

    接下来,为了让大家更好理解本项目工程化的思路,本文会按照以下关键词去逐步研读: React Typescript Vite Redux Toolkit mockjs vite-plugin-mock Ant...Redux Toolkit React的状态管理库历来就是轮子重灾区,各种设计模式层出不穷,这里就不多介绍了。...本项目选用Redux Toolkit作为项目管理,一来,它在众多产品中算是比较优秀的一个框架,使用起来也简单、结构清晰;二来,它封装了immer,写起异步逻辑挺方便的,用起来也可以应对大多数情景。...retcode和message; 改写AxiosInstance的ts类型(由AxiosPromise→Promise),矫正调用方能正确判断返回数据的类型; 设置1个初始化函数init(),.../request'; userInfo: (options?

    2.1K20

    剥开比原看代码17:比原是如何显示交易的详细信息的?

    components/Show.jsx#L100-L117 import { actions } from 'features/transactions' import { connect } from 'react-redux...这个问题难倒了我,我花了几个小时搜遍了比原的前后端仓库,都没找到,最后只好使出了Chrome的Redux DevTools大法,发现在一开始的时候,items就存在了: ?...看来对于分析动态语言,一定要脑洞大开,不能预设原因,另外要利用各种调试工具,从不同的角度去查看数据。要不是Redux的Chrome插件,我不知道还要卡多久。...fetchAll, // ... } } 如果我们还对这一段代码有印象的话,就会知道它最后将会去访问后台的/list-transactions,并在拿到数据后调用dispatch("RECEIVED_TRANSACTION_ITEMS...当然,如果失败了,说明我目前积累的知识还是不够,我还需要再回到当前的做法,想办法再从不同的地方多剥一些比原的外壳,然后再尝试。

    44110

    Vue,React,微信小程序,快应用,TS 和 Koa 一把梭

    $emit,父传子:props,平级组件:vuex或路由传参 插件注册 Vue.use()注册插件,如Vue.use(element)是调用element内部的install方法 路由注册 vue-router...:Vue.use(router)也是调用内部的install方法,挂载到vue实例中生成route和router属性 路由模式 mode属性可以设置history和hash 子路由 children:[...官网配置icon,导出图标,引入assets目录下 vant使用:详见vant官网 全局配置rem:在index.html文件配置 全局配置sass函数和mixin:在build/utils下面的scss的options...;null;undefined;never(从不出现值);元祖(比数组强大,项的类型可以不同);接口:interface关键字;对象:类似JS的object;函数:function声明;类:class关键字...API 作用 get get方法 post post方法 patch patch方法 delete delete方法 prefix 配置公共路由路径 use 将路由分层,同一个实例router中可以配置成不同模块

    3.1K20

    【TypeScript 演化史 — 第三章】标记联合类型 与 never 类型

    使用标记联合类型构建 Redux 操作 标记联合类型真正发挥作用的用例是在 TypeScript 应用程序中使用 Redux 时。...= AddTodo | ToggleTodo; 在本例中,type 属性充当判别属性,并遵循Redux中常见的命名模式。...基于 Redux 操作的 type 属性,我们在不修改现有状态的情况下计算新状态。...never 类型表示值的类型从不出现。具体而言,never 是永不返回函数的返回类型,也是变量在类型保护中永不为 true 的类型。...不可能有该类型的变量 另一种情况是,never 类型被推断为从不为 ture。在下面的示例中,我们检查 value 参数是否同时是字符串和数字,这是不可能的。

    1K20

    Redux介绍及源码解析

    同时 Redux 利用纯函数简单明了的特点, 在 Flux 架构的基础上进行了优化和功能增强 (支持中间件、异步等), 降低了复杂度, 同时还提供强大的工具库支持 (React-ReduxRedux-Toolkit...所以读起来要比 Flux 的源码轻松很多, 逻辑走向比较清晰, 可以学习学习其编程思维, 他导出的函数有如下几个:export { createStore, // 整体的Store创建函数, 不过现在推荐使用redux-toolkit...如上面 disptach 流程所示, subscribe 将在任何一个 action 被执行完后调用, 虽然 Redux 没有传递任何参数给到 subscribe 的 listener, 但是在监听器中可以调用...提供了一种更为优雅、兼容性更好的调用方式, 他允许你传入的actionCreators是函数或者对象, 返回一个可以直接 dispatch 的函数或者对象// 对于每个actionCreator方法,...当然, 现在官方已经开始推荐使用 redux-toolkit, 他是基于 Redux 的最佳实践, 简化了 Redux 的编写调用, 他采用了函数式、柯里化等编程思维, 具体差异可以参考官方说明.

    2.5K20
    领券