javascript - 如何使用 Redux-Saga 和 Hooks 调用 API
问题描述
我正在尝试使用 Redux-saga 中间件来避免异步函数错误,我正在使用 React Hooks,我连接了 Redux-Saga 并执行了 function* yield 函数但我不知道为什么它没有读取我的动作来拦截它它给了我同样的错误:
错误:操作必须是普通对象。使用自定义中间件进行异步操作。
代码:Store.js
import createSagaMiddleware from 'redux-saga';
import rootReducer from './RootReducer'
import {watchFetchImages} from '../middleware/saga';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer,
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(watchFetchImages);
export default store;
Actions.js
import axios from 'axios';
import { GetCategories } from './actionTypes'
import {GetImages} from './actionTypes'
export function fetchCategories() {
var url = 'http://localhost:4000/all_categories';
return (dispatch) => {
return axios.get(url).then((res) => {
dispatch({
type: GetCategories,
payload: res.data
})
})
}
}
export function fetchImages(){
var url ='/all_categories';
return(dispatch) => {
return axios.get(url).then((res)=>{
dispatch({
type:GetImages,
payload:res.data
})
})
}
}
减速器.js
import { GetCategories , GetImages } from "../redux/actions/actionTypes"
const initialState = {
categories: [],
images:[]
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case GetCategories:
return {...state, categories: state.categories.concat(action.payload)}
case GetImages:
return{...state,images:action.payload}
default:
return state;
}
};
export default rootReducer;
Saga.js
import {takeEvery,delay} from 'redux-saga/effects'
function* getImagesAsync(){
yield delay(4000);
console.log('api called')
}
export function* watchFetchImages(){
yield takeEvery("GetImages",getImagesAsync);
}
Home.js 我在哪里调用 redux 操作
const HomePage = props => {
useEffect(()=>props.getImages())
console.log(props)
const mapStateToProps = (images) => ({
images
})
const mapDispatchToProps= dispatch =>({
getImages: () => dispatch(fetchImages())
})
export default connect(mapStateToProps,mapDispatchToProps)(HomePage);
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from "react-redux";
import store from '../src/redux/store';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
任何人都可以帮助我吗?
解决方案
几周前我刚刚参与了一个使用 redux-saga 处理 websockets 的项目,我遇到了一个几乎类似的问题。SageMiddleware 确实适用于 saga 函数,但要将函数用于我使用 redux-thrunk 的操作。小例子:
import {
createStore,
applyMiddleware,
compose
} from "redux";
import createSagaMiddleware from 'redux-saga';
import thunk from "redux-thunk";
import reducer from '../reducers';
const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
(localStorage['storage']) ? JSON.parse(localStorage['storage']) : {},
storeEnhancers(applyMiddleware(sagaMiddleware, thunk))
);
我希望这能以任何可能的方式帮助你。
推荐阅读
- lisp - 用通用 lisp 编程语言将文件中的单词读入嵌套列表
- ansible - 如何指定要在 Ansible 剧本中使用的 Python 版本?
- python - 对 pandas 中的 groupby 函数感到好奇,如何为通用数据集编写 groupby?
- reactjs - 为什么 React 组件代码不会自动缩进?
- ruby - 了解 Ruby sort_by
- spring - Hibernate @LazyToOne(LazyToOneOption.NO_PROXY) @OneToOne(fetch = FetchType.LAZY) 总是急切地获取
- git - git可以用来在服务器之间传输大型二进制文件吗
- angular - Angular Material datepicker:如何为无效和必需的输入获取两个不同的验证错误
- java - 如何使用 MouseEvent?
- javascript - 如何在卡片标题和卡片文本中输入值