使用与react-redux和redux-persist的连接

时间:2017-12-25 20:45:34

标签: javascript reactjs react-redux

我在react-redux&上遇到以下错误redux-persist设置:

  

组件中出现上述错误:在Connect(App)中(由。创建)   路由中的路由(由withRouter(Connect(App))创建)   withRouter(Connect(App))在Router(由BrowserRouter创建)中   Provider中的PersistGate中的BrowserRouter

我设置如下:

store.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 };
};

index.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

这是宣布减速器的正确方法吗?没有redux-persist

,它可以正常工作

authReducer.js

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

更新3

REHYDRATE控制台日志 enter image description here

更新4

index.js(在redurs文件夹中)

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


export default combineReducers({
  user,
  auth
})

1 个答案:

答案 0 :(得分:2)

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

找到
相关问题