ReduxSaga让我的网站重新呈现无限

Question

我使用的是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)

这是我导入getEmployeeList 的saga.js

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!")
}

}

Answer 1

问题是您正在使用相同的操作类型来启动saga&将结果存储到redux存储。

// here you are waiting for GET_EMPLOYEE_LIST to trigger the saga
yield takeEvery(GET_EMPLOYEE_LIST, workEmployeeList)
// here you are using the same action type to store
// response data to redux store
yield put({
type: GET_EMPLOYEE_LIST,
payload: response.data.data
})

正因为如此，每当你完成数据提取时，就会触发另一个传奇故事。

您想要的是使用另一种操作类型来将数据存储在redux存储中，如FETCH_EMPLOYEE_LIST_SUCCESS。不要忘记更新减速器条件，以便使用正确的操作类型。

Answer 2

您在这里为自己构建了一个无限循环：

yield takeEvery(GET_EMPLOYEE_LIST, workEmployeeList)

这意味着：；每次调度GET_EMPLOYEE_LIST，执行workEmployeeList〃；

在workEmployeeList中，您有：

yield put({
type: GET_EMPLOYEE_LIST,
payload: response.data.data
})

这意味着"；调度GET_EMPLOYEE_LIST"；。

所以1。导致2。和2。导致1。

我真的不能提出任何解决这个问题的建议，因为这从一开始就缺少了很多构建块。

但我可以告诉你的是，作为Redux的维护者，我们确实建议不要在数据获取等任务中使用sagas。

如果你想了解背景，我建议你观看Redux异步逻辑的发展。

但一般来说，如果你刚刚进入Redux，我的建议是退一步，先学习我们的官方Redux教程
它不仅展示了现代(2019年后(Redux，它大约是您在这里编写的代码的1/4，不那么令人困惑，而且还展示了多种不同的数据获取方法。