React Redux Sagaエフェクトが実行されない

Question

私はReactをReduxとSagaと使用しています。 this.props.dispatch({type: "WORK_GET_DATA_BEGIN"});でコンポーネントでSagaエフェクトを実行しようとすると、何も起こりません。実行されません。

実行すると、コンソールに「WorkGetDataBegin called」と記録されますが、何もありません。

index.js反応

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。また、あなたのConfigureStoreはストアと佐賀ミドルウェアの両方を返すように変更する必要が

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

お知らせ：ような何かを試してみてください。