How to execute after yield take()

Question

I'm trying redux-saga. I expected console.log("Now Called saga03!!"); executed, after I dispatch event by clicking button.

import { fork, take } from 'redux-saga/effects';

export function* helloSaga(){
    console.log('Hello Saga Root !!');
    yield fork(saga01);
    yield fork(saga02);
    yield fork(sagaFetch);
}

function* saga01() {
    console.log('Hello Saga01 !!!');
}

function* saga02() {
    console.log('Hello Saga02 !!!');
}

function* sagaFetch() {
    while (true){
        console.log("Loop Start!!");
        yield take('FETCH_SAGA_START');
        console.log("Now Called saga03!!");
    }
}

import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore} from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import rootReducer from "../reducers";
import { helloSaga } from "../sagas/saga";
const sagaMiddleware = createSagaMiddleware();

export const history = createBrowserHistory()
export default function configureStore() {
    const store = createStore(
        rootReducer(history), // Reducers
        compose(
            process.env.NODE_ENV === 'development' && window.devToolsExtension ? window.devToolsExtension() : f => f,
            applyMiddleware(
                routerMiddleware(history),
                sagaMiddleware
            ) // Middle Wares
        )
    );
    sagaMiddleware.run(helloSaga);
    return store;
}

class Sample extends Component{
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
        this.doCall = this.doCall.bind(this);
    }

    doCall(){
        console.log("DO CALL!!");
        this.props.dispatch({type: 'FETCH_SAGA_START'});
    }
    render() {
        return (
            <div>
                <button onClick={this.doCall}>Call Saga 03</ button>
            </div>
        );
    }
export default connect((state)=>state)(Sample);

However I can not see any console.log executed.

Am I misunderstanding?

The saga code is okay, I create a sandbox and it works: https://codesandbox.io/s/httpsstackoverflowcomquestions54253642redux-saga-watcher-action-being-invoked-twice-zzwc1?fontsize=14&hidenavigation=1&theme=dark — Martin Kadlec, Dec 25 '19 at 18:03
Sp the issue is most likely in the react component. Is the `doCall` method bound to context? — Martin Kadlec, Dec 25 '19 at 18:03
@Martin Kadlec > Is the doCall method bound to context? What do you mean? — tajihiro, Dec 26 '19 at 03:58
@Martin Kadlec However my code does not work. What is the difference? — tajihiro, Dec 26 '19 at 04:11
I copied the sagas as they are so there is no difference there. The only difference is the view (react component). By "bound to context" I mean if you are calling `bind` on the method in constructor. (See https://reactjs.org/docs/handling-events.html for more in-depth explanation) — Martin Kadlec, Dec 26 '19 at 04:59
Thank you. Yes I do bind already. Then I can get `console.log(""DO CALL!!"")` and I guess `dispatch` working. Because I can get logs "FETCH_SAGA_START" in reducer. — tajihiro, Dec 26 '19 at 05:53
I wounder why action type : "FETCH_SAGA_START" can not reach saga module `yield take`? — tajihiro, Dec 26 '19 at 05:56
Only thing I concerned about is My IDE shows warning 'Unresolved function or method run() ' on `sagaMiddleware.run(helloSaga);` But no error on browser. — tajihiro, Dec 26 '19 at 06:28
And I have @@router/LOCATION_CHANGE by ``. Does it have any affects? — tajihiro, Dec 26 '19 at 07:25
I tried to copy your function to create the redux store and everything is still working. Router actions should not have any effect on this. Can you create a sandbox where it is not working? Also what version of redux-saga are you using? — Martin Kadlec, Dec 26 '19 at 18:07
I don't know how to share sandbox, but here is one. https://codesandbox.io/s/funny-edison-v42jo?from-embed — tajihiro, Dec 27 '19 at 02:34
I tried your sandbox and it seems to be working as well, I get "Called saga03!! " in console when I click on the button — Martin Kadlec, Dec 27 '19 at 02:46
I have same code on sandbox. However my local code still does not work. — tajihiro, Dec 27 '19 at 03:27
Nope, I haven't done a single change to the code. It just worked out of the box. — Martin Kadlec, Dec 27 '19 at 03:40
Thanks. I have no idea what difference is between sandbox and local. Hum... — tajihiro, Dec 27 '19 at 03:44
In case, I uploaded whole files in project to sandbox. I found it does not work. I guess different code affects. The target page is `page11`. https://codesandbox.io/s/funny-edison-v42jo?from-embed — tajihiro, Dec 27 '19 at 04:01
@Martin Kadlec Thank you for all of your advice. Finally it worked. — tajihiro, Dec 27 '19 at 05:58

score 0 · Accepted Answer · answered Dec 27 '19 at 05:56

Finally, I found the reason and difference between working one and fail one. Redux Windows.devToolsExtension caused this problem.

  const store = createStore(
    rootReducer(history), // Reducers
    compose(
      process.env.NODE_ENV === "development" && window.devToolsExtension
        ? window.devToolsExtension()
        : f => f,
      applyMiddleware(routerMiddleware(history), sagaMiddleware) // Middle Wares
    )
  );

I removed them.

  const store = createStore(
    rootReducer(history), // Reducers
    compose(
      applyMiddleware(routerMiddleware(history), sagaMiddleware) // Middle Wares
    )
  );

It worked.

How to execute after yield take()

1 Answers1