我有一个运行 redux 和 thunk 的 React 应用程序,一切都运行良好。我需要在页面重新加载时保留存储状态,以便数据不会丢失,因此创建了一个函数,该函数将数据存储在本地存储中,然后返回准备添加到 createStore 的数据(https://stackoverflow.com/a /45857898/801861)。数据存储工作正常并返回准备设置状态的对象。在 createStore 添加数据对象时,反应无法编译并出现以下错误:
错误:看起来您正在将多个存储增强器传递给 createStore()。不支持此操作。相反,将它们组合成一个函数
这是当前代码返回错误:
const store = createStore(reducers, LoadState, applyMiddleware(thunk) );
//Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function
我正在运行的原始代码:
const store = createStore(reducers, applyMiddleware(thunk) );
我尝试在网上发现一些类似的问题后修复此问题,编译但破坏了最初工作正常的站点代码:
const composeEnhancers = LoadState || compose;
const store = createStore(reducers, composeEnhancers( applyMiddleware(thunk) ) );
//Error: Actions must be plain objects. Use custom middleware for async actions.
不确定我需要更改什么才能使其正常工作,非常感谢任何帮助。
我认为您正在遵循一个在以前版本的 redux 中执行任务的教程。
您需要创建一个 composeEnhancer,它将接受您的 Redux Dev Tools 扩展,如图所示
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
从“redux”导入 compose 后,明显如图所示 -
import {createStore, compose, applyMiddleware} from 'redux';
然后,您可以创建商店,如图所示 -
const Store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)))
该错误是不言自明的。它告诉你到底该做什么!!
也就是说,它告诉您应该使用
compose
增强器。
具体方法如下:
步骤#1:从redux库导入“compose”
import { createStore, applyMiddleware, compose } from 'redux';
第 2 步: 撰写增强剂列表,因为您有多个增强剂
const enhancers = [LoadState, applyMiddleware(thunk)];
const store = createStore(
reducers,
compose(...enhancers)
);
请参阅此页了解更多详情。
我怀疑您的问题出在您的 LoadState 内。到底是什么?这是一个有效的 createStore:
const store = createStore(
reducers,
{ counter: { count: 5 } },
applyMiddleware(() => dispatch => {
console.log('Yoyoyo')
return dispatch;
}));
希望它能解决您的问题。确保输入实际的初始状态值,而不是某个函数或 LoadState 是什么:)
您可以使用包将 redux 存储持久保存到本地存储中,并且不需要创建自己的函数: https://github.com/rt2zz/redux-persist
在该包的第一个示例中,您可以看到如何使用 persistReducer() 和 persistStore() 来保存状态,然后在刷新页面上自动重新水化。
请检查这个高级商店设置可能对您有帮助 在此输入链接描述
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
import { createStore, applyMiddleware, compose } from 'redux';
+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
applyMiddleware(...middleware)
));
我开始使用 React-Redux 并遇到了同样的问题。我不确定这是否是正确的方法,但我们开始吧。 您只需在代码中解决的一个问题是调用该函数,
store = createStore(reducers, LoadState(), applyMiddleware(thunk) );
这个解决方案对我有用。
对于 redux saga 用户,
import createSagaMiddleware from "redux-saga";
const sagaMiddleware = createSagaMiddleware();
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancer(applyMiddleware(sagaMiddleware)))
import { applyMiddleware, compose, createStore } from "redux";
import { devToolsEnhancer } from "redux-devtools-extension";
import { logger } from "./middlewares/logger";
import reducers from "./reducers";
import { todoReducer } from "./todoReducer";
const store = createStore(
reducers,
compose(applyMiddleware(logger), devToolsEnhancer({ trace: true }))
);
export default store;