[英]How to run redux-saga middleware on the any dispatch action?
I have defined following redux saga middleware function in 'usersaga.js'我在“usersaga.js”中定义了以下 redux saga 中间件函数
import {call, put, takeEvery, takeLatest} from "redux-saga/effects";
import {REQUEST_API_DATA, receiveApiData} from '../store/actions';
import userServiceObject from '../services/user.service';
// Worker Saga function will be fired on USER_FETCH_ACTIONS
export function* getApiData(action){
console.log(action)
try{
// Do Api Call
const data = yield call(userServiceObject.getUsers);
console.log(data.data);
yield put(receiveApiData(data.data));
}
catch(error){
console.log("this is error part and executing");
console.log(error);
}
}
In the 'index.js' file I use "run" method to run above function getApiData在“index.js”文件中,我使用“run”方法在函数 getApiData 上运行
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, combineReducers, applyMiddleware } from 'redux';
import {Provider} from 'react-redux';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import contactReducer from './store/reducers/userlist';
// For Creating Saga and connecting store to saga middleware
import createSagaMiddleware from 'redux-saga';
import {getApiData} from './sagas/usersaga';
const sagaMiddleware = createSagaMiddleware();
const rootReducer = combineReducers({
res: contactReducer
})
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(getApiData);
ReactDOM.render(<Provider store={store}> <App /> </Provider>, document.getElementById('root'));
serviceWorker.unregister();
It successfully getting the data from the api and I successfully handle the data in acttion generated by 'receiveApiData' action generator function.它成功地从 api 获取数据,我成功地处理了由 'receiveApiData' 动作生成器函数生成的动作中的数据。
I want to call the getApiData function on a action which is genrated by function 'requestApiData' which is dispatched by.我想对由函数“requestApiData”生成的动作调用 getApiData 函数,该函数是由分派的。 The action name is '{type: REQUEST_API_DATA}'
操作名称是“{type: REQUEST_API_DATA}”
How to run Our getApiData on a action which is dispatched.如何在分派的操作上运行我们的 getApiData。 My userlist reducer file look like below
我的用户列表减速器文件如下所示
import * as actionTypes from "../actions";
const initialState = {
value: '',
results: []
};
const reducer = (state = initialState, action) => {
switch(action.type){
case actionTypes.STORE_CONTACTS: // This is for storing all contacts in the state here
console.log(action.values)
return {
...state,
results: action.values
}
case actionTypes.RECEIVE_API_DATA:
console.log(action);
return{
...state,
results: action.contacts
}
case actionTypes.DELETE_CONTACT:
return {
...state,
results: action.value
}
case actionTypes.ADD_CONTACT:
// perform add action to the database, update state and return All new data
return {
...state,
}
case actionTypes.EDIT_CONTACT:
return {
...state,
}
default:
return state;
}
};
export default reducer;
You need to use the takeEvery
effect you are actually already importing in usersaga.js您需要使用实际上已经在 usersaga.js 中导入的
takeEvery
效果
So in usersaga.js add this saga:所以在 usersaga.js 中添加这个 saga:
export function* requestWatcher(action){
yield takeEvery('REQUEST_API_DATA', getApiData);
}
And in index.js run this saga instead of directly running the getApiData
:在 index.js 中运行这个 saga 而不是直接运行
getApiData
:
sagaMiddleware.run(requestWatcher);
This is one of the basic concepts of redux-saga and I really suggest reading the documentation https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html这是 redux-saga 的基本概念之一,我真的建议阅读文档https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.