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

fv2wmkja  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(143)

我正在使用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!")
    }

}
hmae6n7t

hmae6n7t1#

问题是,您正在使用相同的操作类型来开始 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
})

正因为如此,每次完成获取数据时,都会触发另一个 Saga 。
您需要的是使用另一个操作类型来存储redux存储中的数据,如FETCH_EMPLOYEE_LIST_SUCCESS。不要忘记更新reducer条件以使用正确的操作类型。

sy5wg1nm

sy5wg1nm2#

您在此处为自己构建了一个无限循环:

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来执行数据获取之类的任务。
如果你想了解背景,我会推荐你看the evolution of Redux Async Logic
但总的来说,看到你刚刚进入Redux,我的建议是真正退一步,先通过我们的official Redux Tutorial
它不仅显示了现代(2019年后)Redux,大约是你在这里写的代码的1/4,而且少了很多混乱,但它还显示了多种不同的数据提取方法。

相关问题