7

我有一个运行 redux 和 thunk 的反应应用程序，它一直运行良好。我需要在页面重新加载时保持存储状态，以免数据丢失，因此创建了一个函数，将数据存储在本地存储中，然后返回准备添加到 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.

不知道我需要改变什么才能让它工作，任何帮助表示赞赏。

4

7 回答 7

13

我认为您正在学习在以前版本的 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)))
于 2020-08-13T08:16:17.527 回答
4

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

也就是说，它告诉您应该compose改用增强器。这是如何做到的：

第 1 步：从redux库中导入“ compose ”

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

第 2 步：编写增强器列表，因为您有不止一个

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

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

有关详细信息，请参阅此页面。

于 2020-05-26T13:52:31.063 回答
1

我怀疑您的问题在您的 LoadState 中。它曾经是什么？这是一个有效的createStore：

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

    return dispatch;
  }));

希望它能解决你的问题。确保输入实际的初始状态值，而不是某个函数或 LoadState 是什么:)

于 2019-05-20T08:31:14.550 回答
0

您可以使用一个包将 redux 存储持久化到本地存储中，而无需制作自己的函数： https ://github.com/rt2zz/redux-persist

在包的第一个示例中，您可以看到如何使用 persistReducer() 和 persistStore() 来保存您的状态，然后在刷新页面上自动重新水化。

于 2019-05-20T08:21:59.700 回答
0

对于 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)))
于 2021-12-15T06:36:26.573 回答
0

我从 React-Redux 开始并面临同样的问题。我不确定这是否是正确的方法，但我们开始了。您只需要在代码中解决的一个问题就是调用该函数，

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

这个解决方案对我有用。

于 2020-12-03T14:26:54.817 回答
0

请检查此高级商店设置，它可以帮助您 在此处输入链接描述

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)
  ));

于 2020-08-02T07:38:18.107 回答