Friday 19 May 2017

React-Router + Redux

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