I know this topic is covered here, but my problem includes { Router } from 'react-router'
.
I've successfully moved store = createStore()
prior to ReactDOM.render()
as recommended many times from many resources (including here). I'm still getting the error:
<Provider> does not support changing `store` on the fly.
It is most likely that you see this error because you updated to
Redux 2.x and React Redux 2.x which no longer hot reload reducers
automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0
for the migration instructions.
As demonstrated below, I've considered this migration and am still at a loss. Please help! Thanks in advance!!!
I guess my main question is: am I somehow creating 2 instances of redux store
?
entry.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './containers/Root';
import { Connector } from 'horizon-react';
import routes from './routes';
import { Provider } from 'react-redux';
import horizon from './db';
import { Router, hashHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import configureStore from './store/configureStore';
const store = configureStore();
const history = syncHistoryWithStore(hashHistory, store);
// Define the target container for our application
const rootElement = document.getElementById('root');
// Accept HMR
if (module.hot) {
module.hot.accept();
}
// Render application to target container
ReactDOM.render(
<AppContainer>
<Connector horizon={horizon}>
<Provider store={store}>
<Root {...history} />
</Provider>
</Connector>
</AppContainer>,
rootElement
);
// react-hot-loader 3 specific - rerender AppContainer
// in case of problems with react-router, check this issue:
// https://github.com/gaearon/react-hot-loader/issues/249
if (module.hot) {
module.hot.accept('./containers/Root', () => {
const RootEle = require('./containers/Root').default; // eslint-disable-line
ReactDOM.render(
<AppContainer>
<Connector horizon={horizon}>
<Provider store={store}>
<RootEle {...history} />
</Provider>
</Connector>
</AppContainer>,
rootElement
);
});
}
Root.js
import React from 'react';
import { Connector } from 'horizon-react';
import routes from '../routes';
import { Provider } from 'react-redux';
import horizon from '../db';
import { Router, hashHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
export default ({history}) => (
<Router history={history} routes={routes} />
);
configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { hashHistory } from 'react-router';
import { routerMiddleware, push } from 'react-router-redux';
import createLogger from 'redux-logger';
import rootReducer from '../reducers';
import { persistStore, autoRehydrate } from 'redux-persist'
import localForage from 'localforage'
import * as allActions from '../actions';
const actionCreators = {
...allActions,
push,
};
const logger = createLogger({
level: 'info',
collapsed: true
});
const router = routerMiddleware(hashHistory);
// If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Options: http://zalmoxisus.github.io/redux-devtools-extension/API/Arguments.html
actionCreators,
}) :
compose;
/* eslint-enable no-underscore-dangle */
const enhancer = composeEnhancers(
applyMiddleware(thunk, router, logger),
autoRehydrate()
);
export default function configureStore(initialState: Object | void) {
const store = createStore(rootReducer, initialState, enhancer);
/*
TODO:
run 1x with purge() if redux-persist needs a clearing
*/
// persistStore(store, {storage: localForage})
persistStore(store, {storage: localForage}).purge()
if (module.hot) {
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers').default();
store.replaceReducer(nextRootReducer);
});
}
return store;
}
via ddaaggeett
No comments:
Post a Comment