React Redux - 将多个存储增强器传递给 createStore() 时出错

IT技术 node.js reactjs react-redux redux-thunk redux-store
2021-05-17 10:20:59

我有一个运行 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.

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

4个回答

我认为您正在学习在以前版本的 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 store 持久化到本地存储，不需要自己制作函数：https : //github.com/rt2zz/redux-persist

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

其它你可能感兴趣的问题
上一篇如何在 React 中动态导入图像？ 下一篇Anet A6 - 第一次组装，无法开机