我想实现Redux "subscribe"方法以自动将某些状态更改保存到localstorage,正如Dan Abramov在此视频中解释的那样:Persisting the State to the Local Storage
我在视频中做了同样的事情,但是我得到了错误:
TypeError: __webpack_require__.i(...) is not a function
而且项目没有加载 . 错误指向我在store.js文件中的 store.subscribe
函数 . 你能看到这里的错误吗?有什么错误的顺序或什么?
这是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 store={store}>
“ reducers
”(在createStore方法中)是一个文件,其中所有Reducer组合在一起(使用combineReducers) .
“ localStorageHanding
" file I named differently than in Abramovs example , there was some conflict with files that import " localStorage”,无论如何我都没有问题......) . localStorageHandling的saveState和loadState函数与视频中的完全相同:
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",
1 回答
应该从主入口点导入
throttle
作为命名导入,还是从lodash/throttle
导入默认导入