gpt4 book ai didi

javascript - 使用连接 react-redux 和 redux-persist

转载 作者:行者123 更新时间:2023-11-30 14:52:01 24 4
gpt4 key购买 nike

我的 react-redux 和 redux-persist 设置出现以下错误:

The above error occurred in the component: in Connect(App) (created by Route) in Route (created by withRouter(Connect(App))) in withRouter(Connect(App)) in Router (created by BrowserRouter) in BrowserRouter in PersistGate in Provider

我是这样设置的:

商店.js

import {applyMiddleware, createStore} from 'redux';
import {persistStore,persistCombineReducers} from 'redux-persist';
import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native

import { logger } from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import reducer from './reducers'

const middleware = applyMiddleware(promise(), thunk, logger);

const config = {
key: 'root',
storage,
};

const reducers = persistCombineReducers(config, {reducer});

export const configureStore = () => {
const store = createStore(reducers, middleware);
const persistor = persistStore(store);
return { persistor, store };
};

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import './css/app.css';
import App from './containers/App';

import { PersistGate } from 'redux-persist/es/integration/react'
import configureStore from './store';
const { persistor, store } = configureStore()


ReactDOM.render(
<Provider store={store} >
<PersistGate persistor={persistor}>
<BrowserRouter>
<App/>
</BrowserRouter>
</PersistGate>
</Provider>,
document.getElementById('root')
);

App.js

import React from 'react'
import { withRouter, Switch, Route } from 'react-router-dom'
import { connect } from 'react-redux'
...
@withRouter
@connect((store) => {
return {
isAuthenticated: store.auth.isAuthenticated,
};
})
export default class App extends React.Component {
render() {
...
}
}

更新 1

完整的控制台日志 enter image description here

更新 2

这是声明 reducer 的正确方法吗?没有 redux-persist 也能正常工作

authReducer.js

export default function reducer(state = {
isAuthenticated: false
}, action) {
...
}

更新 3

REHYDRATE 控制台日志 enter image description here

更新 4

index.js(在 reducers 文件夹中)

import { combineReducers } from 'redux';
import user from './userReducer';
import auth from './authReducer';


export default combineReducers({
user,
auth
})

最佳答案

所以问题是不应该同时使用 combineReducers 和 persistCombineReducers。类似情况可以在这里找到 https://github.com/rt2zz/redux-persist/issues/516

关于javascript - 使用连接 react-redux 和 redux-persist,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47971918/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com