Store.subscribe: TypeError: __webpack_require __. I (...) не является функцией

Я хотел реализовать метод подписки Redux для автоматического сохранения определенных изменений состояния в localstorage, как объясняет Дэн Абрамов в этом видео: Сохранение состояния в локальном хранилище

Я сделал то же самое, что и на видео, но получаю сообщение об ошибке:

TypeError: __webpack_require__.i(...) is not a function

И проект не загружается. Ошибка указывает на функцию store.subscribe, которая есть у меня в файле store.js. Вы видите здесь что-то не так? Что-то в неправильном порядке или что-то в этом роде?

Вот файл store.js (кроме других импортов):

import {throttle} from 'lodash/throttle';

const sagaMiddleware = createSagaMiddleware();
const logger = createLogger({
    collapsed: true,
});

const middlewares = [
    sagaMiddleware,
    routerMiddleware(history),

]; 

const enhancers = [
    applyMiddleware(...middlewares)
]; 

const composeEnhancers = 
    process.env.NODE_ENV !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;


const persistedState = loadState();

const store = createStore(
    reducers, 
    persistedState,
    composeEnhancers(...enhancers)
);

store.subscribe(throttle(() => {
    saveState({
        cart: store.getState().cart
    });
}), 1000);

sagaMiddleware.run(rootSaga);

export default store;

Если закомментировать блок store.subscribe, ошибка исчезнет

// store.subscribe(throttle(() => {
//  saveState({
//      cart: store.getState().cart
//  });
// }), 1000);

Store.js импортируется в "index.js" и помещается в Provider:

 <Provider store = {store}>

«reducers» (в методе createStore) - это файл, в котором объединены все редукторы (с combReducers).

Файл "localStorageHanding" я назвал иначе, чем в примере Абрамова, был некоторый конфликт с файлами, которые импортируют "localStorage", я не думаю, что localStorage нужно импортировать, но это не проблема ...). Функции saveState и loadState localStorageHandling точно такие же, как в видео:

export const loadState = () => {

    try{

        const serializedState = localStorage.getItem('state');
        if (serializedState === null){
            return undefined;
        }

        return JSON.parse(serializedState);
    }catch(err){
        return undefined;
    }

}


    export const saveState = (state) => {

        try{
            const serializedState = JSON.stringify(state);
            localStorage.setItem('state', serializedState);

        }catch(err){

        }
    }

у меня есть

"react-redux": "^5.0.3", 
 "react": "^15.5.0",
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 385
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Следует либо импортировать throttle из основной точки входа как именованный импорт, либо как импорт по умолчанию из lodash/throttle.

import { throttle } from 'lodash';

// or

import throttle from 'lodash/throttle';

Другие вопросы по теме