React Redux-错误将几个商店增强剂传递到streateStore()

Question

我有一个React应用程序运行redux和thunk，这一切都很好。我需要在页面重新加载页面上坚持存储状态，以免丢失数据，因此创建了一个函数，该函数正在localStorage中存储数据，然后返回准备添加到streateStore的数据(https://stackoverflow.com/a/45857898/801861(。数据存储正常工作，并返回对象准备设置SATE。添加stestestore React的数据对象时，无法与此错误进行编译：

错误：看起来您正在将几个商店增强剂传递给streateStore((。这是不支持的。相反，将它们组合到一个函数

这是当前代码返回错误：

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工具扩展名

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

从" redux"导入后，显然如图所示 -

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

然后，您可以如图所示创建商店 -

const Store = createStore(rootReducer, composeEnhancer(applyMiddleware(thunk)))

Answer 2

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

也就是说，它应该改为compose您的增强器。这是它的方法：

步骤＃1： import' compose '来自 redux library

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

步骤＃2：撰写您的增强剂列表，因为您有多个

const enhancers = [LoadState, applyMiddleware(thunk)];
const store = createStore(
    reducers,
    compose(...enhancers)
);

请参阅此页面以获取更多详细信息。

Answer 3

我怀疑您的问题在您的LoadState内。这是什么？这是一个工作棚：

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

希望它能解决您的问题。确保放置实际的初始状态值，而不是某些功能，或者是LoadState是：(

Answer 4

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

在软件包的第一个示例中，您可以看到如何使用persistreducer((和persistStore((保存状态，然后在刷新页面上自动补充。

Answer 5

plz检查此高级商店设置，可以帮助您在此处输入链接说明

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

Answer 6

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

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

此解决方案对我有用。

Answer 7

用于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)))

Answer 8

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;