redux-saga, TypeError: (0 , _effects.takeLatest) is not a function?

Question

I'm beginning with redux-saga. I can't figure out what I do wrong.

webpack compile succeeded. My app can run, but chrome gives me this error.

And dispatch action doesn't work.

node v6.6.0

saga/Beginning.js:

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects';

//api service
const api = 'http://it-ebooks-api.info/v1';

const service = {};

service.fetchBook = function(query) {
  const url = `${api}/search/${query}`;
  return fetch(url).then(res => res.json());
};

function* fetchBook(action) {
  try {
    const books = yield call(service.fetchBook, action.payload.query);
    yield put({ type: 'BOOK_FETCH_SUCCEEDED', books });
  } catch (e) {
    yield put({ type: 'BOOK_FETCH_FAILED', message: e.message });
  }
}

function* watchFetchBook() {
  yield takeEvery('BOOK_FETCH_REQUESTED', fetchBook);
}

function* watchFetchBook() {
  yield takeLatest('BOOK_FETCH_REQUESTED', fetchBook);
}

export default watchFetchBook;

saga/index.js

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

import Beginning from './Beginning';

export default function* root() {
  yield [fork(Beginning)];
}

Answer 1

takeLatest doesn't belongs to Redux Saga effects (see reference), you have to import it using

import { takeLatest } from 'redux-saga'

instead of

import {takeLatest} from 'redux-saga/effects';

Answer 2

It depends,

if redux-saga version < 0.14 then

import { takeEvery, takeLatest, throttle } from 'redux-saga';

else

import { takeEvery, takeLatest, throttle } from 'redux-saga/effects';

reference:

import { takeEvery, takeLatest, throttle } from 'redux-saga' was deprecated already since 0.14 which got out nearly a year ago.