Redux传奇在撞到减速机后没能捕捉到动作。

Question

我试图为客户实现redux传奇，但我无法让佐贺抓住行动后，击中减速机。我的传奇似乎从来没有开火，所以我没有得到我的期望后，我称为"DATA_FETCH_REQUESTED“减速机的行动。

我所期望的结果是:为了触发我的传奇和我的redux存储中的errorMessage变量，包含获取的数据，或者如果提取失败，错误消息。

我得到的结果是:我的传奇没有触发，我的redux存储中的errorMessage变量总是包含字符串"### saga未能捕捉到这个动作###“(它应该但是应该被我的传奇的动作纠正，而这个动作永远不会发生)。

我在这里担心的是，saga中间件从未正确启动。我已经在我的传奇中放置了打印声明，而我从未在我的控制台中看到它们，这似乎证实了我的理论。任何帮助都将不胜感激。见下面的代码：

这是我的根传奇文件：

    function fetchData() {
        // fetches data
    }

    function* callFetchData() {
        try {
            const data = yield call(fetchData)
            yield put({ type: "DATA_FETCH_SUCCEEDED", data: data })
        } catch (e) {
            yield put({ type: "DATA_FETCH_FAILED", message: e.message })
        }
    }

    function* fetchDataSaga() {
        yield* takeEvery("DATA_FETCH_REQUESTED", callFetchData)
    }

    function* rootSaga() {
        yield [fork(fetchDataSaga)]
    }

    export default rootSaga

，这是我的减速机：

    const initialState = {
        errorMessage: null,
    }

    const dataReducer = (state = initialState, { payload, type }) => {
        switch (type) {
            case "DATA_FETCH_REQUESTED": {
                return {
                    ...state,
                    errorMessage: '### saga failed to catch this action ###',
                }
            }
            case "DATA_FETCH_SUCCEEDED": {
                return {
                    ...state,
                    errorMessage: payload.data,
                }
            }
            case "DATA_FETCH_FAILED": {
                return {
                    ...state,
                    errorMessage: payload.errorMessage,
                }
            }
            default: {
                return state
            }
        }
    }

    export default dataReducer

这是我的index.js文件：

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
    import { Provider } from 'react-redux'
    import rootReducer from './redux/rootReducer'
    import { createStore, applyMiddleware } from 'redux'
    import createSagaMiddleware from 'redux-saga'
    import rootSaga from './sagas/rootSaga'

    const sagaMiddleware = createSagaMiddleware()

    const store = createStore(rootReducer, applyMiddleware(sagaMiddleware))

    sagaMiddleware.run(rootSaga)

    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
    )

更新：

看起来，我只是忘了用“redux/effects”库中的all()方法包装我的rootSaga的已获得的价值。将其改为：

    function* rootSaga() {
        yield all([fork(fetchDataSaga)])
    }

没有错误，因为这是一个逻辑问题，而不是句法问题。

Answer 1

，我不能让传奇在击中减速机之前抓住动作。

Redux传奇不能这么做Redux的设计目的是先将动作发送给减速机，然后再发送给saga。

如果你需要一个动作先由传奇来处理，因为某种原因，那么我建议把它分成两个动作:第一个动作不会被任何减速机听到，所以即使它去了减速机，它也没有效果。然后，传奇得到了它，它转过身，分派第二个行动。第二个动作是减速器处理的。

Answer 2

你的DATA_FETCH_REQUESTED动作在哪里？似乎你希望传奇会听你的减速机。还原器是这个流中的最终目标，因此不会触发任何操作，只会更新其状态。

正确的流应该如下所示：

您需要从代码中调用一个操作，以发送获取数据的请求。

// Action: to be called from within your component
export function fetchData() {
    return { type: "DATA_FETCH_REQUESTED" };
}

然后，一旦识别DATA_FETCH_REQUESTED动作，传奇就会执行。

// Saga: handles DATA_FETCH_REQUESTED action call 
function* callFetchData() {
    try {
        const wizards = yield call(fetchData) // <--- did you mean data instead of wizards?
        yield put({ type: "DATA_FETCH_SUCCEEDED", data: data })
    } catch (e) {
        yield put({ type: "DATA_FETCH_FAILED", message: e.message })
    }
}

// Saga: listen to DATA_FETCH_REQUESTED actions
function* fetchDataSaga() {
    yield* takeEvery("DATA_FETCH_REQUESTED", callFetchData)
}

然后减速机就会相应地更新。

祝好运