Question

我有一个运行redux和thunk的react应用程序，一切正常。我需要在页面重新加载时保持存储状态，以便不丢失数据，因此创建了一个函数，该函数将数据存储在localstorage中，然后返回准备添加到createStore（https://stackoverflow.com/a/45857898/801861）的数据。数据存储正常，返回对象准备好设置状态。在createStore中添加数据对象时，react编译失败并显示以下错误：

错误：您似乎正在将几个商店增强器传递给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.

不确定我需要进行哪些更改才能使其正常工作，感谢您的帮助。

Answer 1

我认为您正在关注一个教程，该教程将在以前版本的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)))

Answer 2

该错误是不言自明的。它会告诉您该怎么做！

也就是说，它告诉您应该compose来使用增强器。这是怎么做的：

步骤1：：从 redux 库中导入“ 组成”

import { createStore, applyMiddleware, compose } from 'redux';

第2步：由于您拥有多个增强子，因此组成了增强子列表

const enhancers = [LoadState, applyMiddleware(thunk)];

const store = createStore(
    reducers,
    compose(...enhancers)
);

有关更多详细信息，请参见this page。

Answer 3

您可以使用软件包将redux存储持久化到本地存储中，而无需执行自己的功能： https://github.com/rt2zz/redux-persist

在该程序包的第一个示例中，您可以看到如何使用persistReducer（）和persistStore（）保存状态，然后在刷新页面上自动补水。

Answer 4

我怀疑您的问题在您的LoadState之内。到底是什么这是一个有效的createStore：

const store = createStore(
  reducers, 
  { counter: { count: 5 } },
  applyMiddleware(() => dispatch => { 
    console.log('Yoyoyo')

    return dispatch;
  }));

希望它可以解决您的问题。确保放置实际的初始状态值，而不要放置某些函数或它的LoadState是：）

Answer 5

开始使用React-Redux并遇到同样的问题。我不确定这是否是正确的方法，但是我们继续。您只需要在代码中修复的一个问题就是调用函数，

store = createStore(reducers, LoadState(), applyMiddleware(thunk) );

此解决方案对我有用。

Answer 6

plz检查此高级商店设置可能会对您有所帮助 enter link description here

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-将多个商店增强器传递给createStore（）时出错

6 个答案: