javascript - React Redux Saga Effect 不执行

Question

我正在使用React与 Redux和 Saga 。当我尝试使用 this.props.dispatch({type: "WORK_GET_DATA_BEGIN"}); 在我的组件中执行 Saga Effect 时，没有任何反应，它不会被执行。

如果它运行，它应该将“WorkGetDataBegin called”记录到控制台，但什么也没有。

index.js//react的入口点

import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";

import ConfigureStore from "./ConfigureStore";

import App from "./App";

//Create the redux store with saga middleware
const store = ConfigureStore();

$(window).load(function(){StartReact()});

function StartReact()
{
    ReactDOM.render(
        <Provider store={store}>
            <App/>
        </Provider>,
        document.getElementById('container')
    );
}

ConfigureStore.js//初始化商店

import {createStore, applyMiddleware} from "redux";
import createSagaMiddleware from 'redux-saga'
import allReducers from "./AllReducers";

export default function ConfigureStore()
{
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(allReducers, applyMiddleware(sagaMiddleware));
    return store;
}

App.js//组件

import React from "react";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";

class App extends React.Component
{
    constructor(props)
    {
        super(props);
    }

    componentDidMount()
    {
        console.log("componentDidMount");
        this.props.dispatch({type: "WORK_GET_DATA_BEGIN"});
    }

    render()
    {
        return(
            <div></div>
        );
    }
}

function mapStateToProps(state)
{
    return {
    }
}

function mapDispatchToProps(dispatch)
{
    return bindActionCreators({}, dispatch);
}

export default connect(mapStateToProps)(App);

WorkGetData.js//传奇效果

import { takeEvery, delay } from 'redux-saga';
import { put, call } from 'redux-saga/effects';

//The name of the actionType
const actionType = "WORK_GET_DATA";
// ******** Calls ********
const actionTypeBegin = actionType +"_BEGIN";
const actionTypeAbort = actionType +"_ABORT";

// ******** Responses ********
const actionTypeSuccess = actionType +"_SUCCESS";
const actionTypePending = actionType +"_PENDING";
const actionTypeFailure = actionType +"_FAILURE";

//Watcher saga for BEGIN
export function* WatchWorkGetDataBegin()
{
    yield* takeEvery(actionTypeBegin, WorkGetDataBegin);
}

//Saga for BEGIN
export function* WorkGetDataBegin()
{
    yield call(console.log,"WorkGetDataBegin called");
    //Notify the UI that the action started
    yield put({ type: actionTypePending });
    yield call(delay, 5000);
    const payload = yield call(WorkGetDataAsync);
    yield put({ type: actionTypeSuccess, payload: payload });
}

//Async function for fetching data
function* WorkGetDataAsync()
{
    console.warn("Implement AJAX Request");
    return(
        {
            companyName: "User's Company",
            salary: 500.7
        }
    );
}

Answer 1

您定义了您的 WatchWorkGetDataBegin 传奇，但从未定义过 instructed the middleware来执行它。尝试这样的事情:

import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";

import ConfigureStore from "./ConfigureStore";
import WatchWorkGetDataBegin from "./WorkGetData";

import App from "./App";

//Create the redux store with saga middleware
const { store, middleware } = ConfigureStore();
middleware.run(WatchWorkGetDataBegin);

$(window).load(function(){StartReact()});

function StartReact()
{
    ReactDOM.render(
        <Provider store={store}>
            <App/>
        </Provider>,
        document.getElementById('container')
    );
}

请注意，您还必须修改 ConfigureStore 以返回商店和 saga 中间件。