yield take()后如何执行

Question

我正在尝试 redux-saga。我希望 console.log("Now Called saga03!!"); 在我通过单击按钮发送事件后执行。

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

但是我看不到任何 console.log 执行。

我是不是误会了？

Answer 1

终于，我找到了工作一和失败一的原因和区别。 Redux Windows.devToolsExtension 导致了这个问题。

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

我删除了它们。

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

成功了。

yield take()后如何执行

How to execute after yield take()

reactjs

redux

redux-saga