Redux saga - Worker saga not getting called on react native

问题

I am trying to handle async actions with redux saga on a simple app. It calls an api to fetch some tweets from a local proxy server.

By looking at the logs, I can tell that the watcher saga is getting run, the action is being dispatched, the reducers are getting fired but the worker saga is not getting called...

Here is my code - 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);
}

回答1:

Turns out I was fetching "takeEvery" from "redux-saga/effects" instead of from "redux-saga". Other fixed are also included below:

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

来源：https://stackoverflow.com/questions/49472960/redux-saga-worker-saga-not-getting-called-on-react-native

标签

reactjs

react-native

redux

redux-saga