Redux saga - Worker saga 没有被调用 react native答案

【问题标题】：Redux saga - Worker saga not getting called on react nativeRedux saga - Worker saga 没有被调用 react native
【发布时间】：2018-09-03 12:08:24
【问题描述】：

我正在尝试在一个简单的应用程序上使用 redux saga 处理异步操作。它调用一个 api 从本地代理服务器获取一些推文。

通过查看日志，我可以看出 watcher saga 正在运行，action 正在调度，reducer 正在被解雇，但 worker saga 没有被调用...

这是我的代码 - https://github.com/TechyTimo/react-native-tweets

store.js

import { Platform } from 'react-native';
import RootReducer from './reducers';

import { applyMiddleware, createStore, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';
import logger from 'redux-logger';

import devTools from 'remote-redux-devtools';

const sagaMiddleware = createSagaMiddleware();

const Store = createStore(
    RootReducer,
    compose(
        applyMiddleware(sagaMiddleware, logger),
        devTools({
            name: Platform.OS,
            hostname: 'localhost',
            port: 5678,
            suppressConnectErrors: false,
        }),
    )
);

sagaMiddleware.run(rootSaga);

export default Store;

actions.js

import { log } from './utilities.js';

export const SEARCH_FOR_TWEETS_REQUESTED = 'SEARCH_FOR_TWEETS_REQUESTED';

export function searchForTweetsRequested(searchText) {
  log('dispatch request') // getting logged
  return {
    type: SEARCH_FOR_TWEETS_REQUESTED,
    searchText
  }
}

sagas.js

import { call, put, fork, takeEvery, takeLatest } from 'redux-saga/effects'
import api from './api'
import { log } from './utilities'

import { 
  SEARCH_FOR_TWEETS_REQUESTED, 
  searchForTweetsSuccess,
  searchForTweetsError, 
} from './actions';

// Worker sagas
function* fetchTweets(action) {
  log('worker saga '+ action.type) // not getting logged
  try {
    const activeSearch = yield select(state => state.searches.activeSearch)
    log('emptying activeSearch: ' + activeSearch)
    yield put(setActiveSearch(''));

    log('api call... ' + action.searchText)
    const tweets = yield call(api.search, action.searchText);

    yield put(searchForTweetsSuccess(action.searchText, tweets));
  } catch (error) {
    yield put(searchForTweetsError(action.searchText, error.message));
  }
}

/*
  Watcher sagas
*/
export function* watchSearchTweets() {
  log('watchSearchTweets') // getting logged
  yield* takeEvery(SEARCH_FOR_TWEETS_REQUESTED, fetchTweets); // Allow concurrent workers
}

// Root saga that will be run, we just fork the watcher sagas
export default function* rootSaga() {
  yield fork(watchSearchTweets);
}

【问题讨论】：

请添加您的代码的相关sn-p（或简化版本）
添加了代码。看看日志。正在调度操作，但没有调用工人传奇

标签： reactjs react-native redux redux-saga

【解决方案1】：

原来我是从“redux-saga/effects”而不是“redux-saga”获取“takeEvery”。其他固定也包括在下面：

sagas.js

import { takeEvery } from 'redux-saga';
import { call, put, fork, select } from 'redux-saga/effects'
import api from './api'
import { log } from './utilities'

import { 
  SEARCH_FOR_TWEETS_REQUESTED, 
  searchForTweetsSuccess,
  searchForTweetsError, 
  setActiveSearch
} from './actions';

// Workers sagas
function* fetchTweets(action) {
  log('worker saga '+ action.type)
  try {
    const activeSearch = yield select(state => state.searches.activeSearch)
    log('emptying activeSearch: ' + activeSearch)
    yield put(setActiveSearch(''));

    log('api call... ' + action.searchText)
    const tweets = yield call(api.search, action.searchText);

    yield put(searchForTweetsSuccess(action.searchText, tweets));
  } catch (error) {
    yield put(searchForTweetsError(action.searchText, error.message));
  }
}

/*
  Watcher sagas
*/
export function* watchSearchTweets() {
  log('watchSearchTweets')
  yield* takeEvery(SEARCH_FOR_TWEETS_REQUESTED, fetchTweets); // Allow concurrent workers
}

// Root saga that will be run, we just fork the watcher sagas
export default function* rootSaga() {
  yield fork(watchSearchTweets);
}

【讨论】：