我正在使用Redux-Saga和Redux-Thunk,这是我配置的存储,但它使我的网站重新渲染无限。你能告诉我我应该怎么做来解决这个问题吗?谢谢。
Store.js
import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from '@redux-saga/core'
import EmployeeReducer from './reducers/EmployeeReducer'
import thunk from 'redux-thunk'
import axiosMiddleware from "redux-axios-middleware";
import HttpService from "app/services/HttpService";
import RootReducer from './reducers/RootReducer'
import {getEmployeeList} from './saga'
const initialState = {};
const sagaMiddleware = createSagaMiddleware()
const middlewares = [
thunk,
sagaMiddleware,
axiosMiddleware(HttpService.getAxiosClient())
];
export const Store = createStore(
RootReducer,
initialState,
compose(
applyMiddleware(...middlewares)
)
);
sagaMiddleware.run(getEmployeeList)
这是saga.js,我在其中导入了getEmployeeList
import { call, cancel, put, takeEvery, takeLatest } from 'redux-saga/effects'
import axios from 'axios'
import { GET_EMPLOYEE_LIST } from './actions/EmployeeActions'
import ConstantList from '../../app/appConfig'
const API_PATH = ConstantList.API_ENPOINT + "/employees"
export function* getEmployeeList() {
yield takeEvery(GET_EMPLOYEE_LIST, workEmployeeList)
}
export function* workEmployeeList() {
console.trace("hello");
try {
const url = API_PATH + '/search'
const response = yield call(axios.post, url, {})
yield put({
type: GET_EMPLOYEE_LIST,
payload: response.data.data
})
} catch (error) {
console.log("Request failed!")
}
}
2条答案
按热度按时间hmae6n7t1#
问题是,您正在使用相同的操作类型来开始 Saga &将结果存储到redux存储中。
正因为如此,每次完成获取数据时,都会触发另一个 Saga 。
您需要的是使用另一个操作类型来存储redux存储中的数据,如
FETCH_EMPLOYEE_LIST_SUCCESS
。不要忘记更新reducer条件以使用正确的操作类型。sy5wg1nm2#
您在此处为自己构建了一个无限循环:
这意味着:“每次调度
GET_EMPLOYEE_LIST
时,执行workEmployeeList
“在
workEmployeeList
中,您可以:这意味着“调度
GET_EMPLOYEE_LIST
“。所以1。导致2。2。导致1。
我真的不能建议任何东西来解决这个问题,因为这是失踪了很多积木工作摆在首位。
但是我可以告诉你的是,作为Redux的维护者,我们真的建议不要使用sagas来执行数据获取之类的任务。
如果你想了解背景,我会推荐你看the evolution of Redux Async Logic。
但总的来说,看到你刚刚进入Redux,我的建议是真正退一步,先通过我们的official Redux Tutorial。
它不仅显示了现代(2019年后)Redux,大约是你在这里写的代码的1/4,而且少了很多混乱,但它还显示了多种不同的数据提取方法。