CODEWITHSUNDEEP
javascriptreactjsreduxredux-saga
Orlando
Orlando

Reputation: 499

React Redux Saga Effect doesn't execute

I'm using React with Redux and Saga. When I try to execute a Saga Effect in my component with this.props.dispatch({type: "WORK_GET_DATA_BEGIN"}); nothing happens, it is not executed.

If it runs it should log "WorkGetDataBegin called" to the console, but there is nothing.

index.js //The entry point for 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 //Initializes the store

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 //Component

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 //The saga effect

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

Upvotes: 1

Views: 1448

Answers (1)

0rvidal
0rvidal

Reputation: 2062

You defined your WatchWorkGetDataBegin saga but never instructed the middleware to execute it. Try something like:

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

Notice that you also have to modify your ConfigureStore to return both the store and the saga middleware.

Upvotes: 1

Related Questions