代码之家 › 专栏 › 技术社区 › Paul

React Redux-在CreateStore上执行预加载状态和加载Thunk中间件时出错

redux-store redux-thunk react-redux reactjs node.js

Paul · 技术社区 · 6 年前

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

我不确定我需要做什么改变才能让它工作,任何帮助都将不胜感激。

0 回复 | 直到 6 年前

Dharman Aman Gojariya 4 年前

我认为您正在遵循一个教程,该教程在以前版本的redux中执行任务。

您需要创建一个composeEnhancer,它将接收您的Redux开发工具扩展,如图所示

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

从“redux”导入compose后,如图所示-

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

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

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

mytuny 5 年前

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

也就是说,它告诉你应该 compose 你的增强子。以下是如何做到这一点:

第一步: 进口的组成 “从雷杜图书馆

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

第2步: 既然你有不止一种增强剂,那就列出你的增强剂清单吧

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

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

提到 this page 更多细节。

Thomas Johansen 6 年前

我怀疑你的问题在你的州内。到底是什么?下面是一个正在运行的createStore:

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

    return dispatch;
  }));

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

Didac CS 6 年前

您可以使用一个包将redux存储持久化到本地存储中,而无需创建自己的功能: https://github.com/rt2zz/redux-persist

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

chetan mahajan 4 年前

请检查此高级商店设置,它可能会帮助您 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)
  ));

java 4 年前

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

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

这个解决方案对我有效。

Archil Labadze 3 年前

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