Missing "./saga" specifier in "redux" package

52 Views Asked by At

I'm learning redux-saga and tried to setup in my React application but I was stuck with this error:

Missing "./saga" specifier in "redux" package

product.saga.js

import { takeLatest, all, call, put } from "redux-saga/effects";
import { getAllProducts } from "./product.utils";

export function* fetchProductsAsync() {
    try {
        const apiResponse = yield call(getAllProducts)
        yield put(fetchProductsSuccess(apiResponse))
    } catch (error) {
        yield put(fetchProductsFailed(error))
    }
}

export function* onFetchProducts() {
    yield takeLatest(
        ProductActionTypes.GET_ALL,
        fetchProductsAsync
    )
}

export function* productsSaga() {
    yield all([
        call(onFetchProducts)
    ])
}

root-saga.js

import { all, call } from 'redux-saga/effects'

import { productsSaga } from './products/product.saga'

export function* rootSaga() {
    yield all([
        call(productsSaga)
    ])
}

store.js

import { createStore, applyMiddleware } from 'redux'
import { persistStore } from 'redux-persist'
import { logger } from 'redux-logger'
import createSagaMiddleware from 'redux/saga'
import { rootSaga } from './root-saga'
import rootReducer from './root-reducer'

const sagaMiddleware = createSagaMiddleware()

const middlewares = [logger, sagaMiddleware]

export const store = createStore(rootReducer, applyMiddleware(...middlewares))

sagaMiddleware.run(rootSaga)

export const persistor = persistStore(store)

export default { store, persistor }

Tried to re-run npm install on redux & redux-saga but still did not work.

1

There are 1 best solutions below

1
phry On

You are trying to import from 'redux/saga', which does definitely not exist. (Saga is not included in the redux package and generally we wouldn't recommend it for most usages nowadays.)

Did you maybe want to import from 'redux-saga'?

Also, please note that createStore, applyMiddleware are very outdated (pre-2019) ways of setting up a Redux store that end up in Redux code that's 3-4 times as much code as modern Redux - you might generally be following a very outdated tutorial. I'd recommend the official Redux tutorial to learn Redux: https://redux.js.org/tutorials/essentials/part-1-overview-concepts)