Redux Toolkit 是一个官方推荐的用于简化 Redux 开发的工具集。它提供了一些工具函数和最佳实践,以减少样板代码并提高开发效率。当你遇到 GET
请求从不调用,OPTIONS
请求从不返回的问题时,可能是由于以下几个原因:
OPTIONS
请求来询问服务器是否允许该跨域请求。cors
中间件:cors
中间件:GET
请求。例如:GET
请求。例如:OPTIONS
和 GET
请求的状态码和响应内容。以下是一个简单的示例,展示如何在 Redux Toolkit 中处理异步 GET
请求:
// 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
请求从不返回的问题。
领取专属 10元无门槛券
手把手带您无忧上云