Javascript React Redux Saga效应不'；不执行

我正在使用和。 当我试图用

this.props.dispatch（{type:“WORK\u GET\u DATA\u BEGIN”}）在我的组件中执行一个传奇效果时没有发生任何事情，它不会被执行

如果它运行，它应该将“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')
    );
}

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);

您定义了您的
WatchWorkGetDataBegin
saga，但从未执行它。尝试以下方法：

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')
    );
}

导入“babel polyfill”；
从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}；
从“/ConfigureStore”导入ConfigureStore；
从“/WorkGetData”导入WatchWorkGetDataBegin；
从“/App”导入应用程序；
//使用saga中间件创建redux存储
const{store，middleware}=ConfigureStore（）；
run（WatchWorkGetDataBegin）；
$（window）.load（函数（）{StartReact（）}）；
函数StartReact（）
{
ReactDOM.render(
,
document.getElementById（'容器'）
);
}

请注意，您还必须修改
ConfigureStore
，以返回store和saga中间件。
在导出store run middleware.run（saga.WatchWorkGetDataBegin）之前，在中间件中尝试此操作；其中saga是对你的saga文件的引用。我将在周一试用
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
        }
    );
}

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')
    );
}