Совместимы ли 'redux-loop` и `connected-реагирующий-маршрутизатор`?

Question

Я сделал простое приложение реакции с примером кода из следующего поста, который я оставляю только в качестве ссылки.В остальном я новичок в экосистеме javascript и пытаюсь объединить несколько незнакомых инструментов (для того, чтобы изучить их).

https://medium.com/@notrab/getting-started-with-create-react-app-redux-react-router-redux-thunk-d6a19259f71f

Соответственно, мой store.js выглядит следующим образом:

import { createStore, applyMiddleware, compose, } from 'redux';
import { connectRouter, routerMiddleware, } from 'connected-react-router';
import thunk from 'redux-thunk';
import { install, } from 'redux-loop';
import createHistory from 'history/createBrowserHistory';
import rootReducer from './modules';

export const history = createHistory();

const initialState = {};
const middleWare = [thunk, routerMiddleware(history),];

const composedEnhancers = compose(
  applyMiddleware(...middleWare),
  install()
);

const store = createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
);

export default store;

Кажется, это работает нормально, и триггеры Link / Route на моей странице работают нормально.Обратите внимание, что install из redux-loop вызывается как часть энхансера (?), И это нормально.У меня нет вызовов loop в моих редукторах, я просто вставил команду install в качестве энхансера, надеясь, что смогу добавить их.

Вот мой основной код reducer:

import { combineReducers, } from 'redux';
import counter from './counter';
import todo from './todo';

export default combineReducers({
  counter,
  todo,
});

Опять же, это прекрасно работает.Однако, если я вставлю loop в мои редукторы, он умрет.Согласно документации, это потому, что нам нужно использовать combineReducers из redux-loop.Хорошо.Если я заменю импорт в верхней части на import { combineReducers, } from 'redux-loop'; (не изменяя мои редукторы вообще, нестандартных возвратов пока нет), то я получаю некоторые совершенно бессмысленные ошибки в коде библиотеки:

ConnectedRouter.js:58 Uncaught TypeError: Cannot read property 'pathname' of undefined
    at ConnectedRouter.js:58
    at Object.dispatch (redux.js:221)
    at dispatch (install.js:66)
    at middleware.js:25
    at index.js:11
    at Object.onLocationChanged (ConnectedRouter.js:154)
    at handleLocationChange (ConnectedRouter.js:85)
    at new ConnectedRouter (ConnectedRouter.js:94)
    at constructClassInstance (react-dom.development.js:11769)
    at updateClassComponent (react-dom.development.js:13491)
    at beginWork (react-dom.development.js:14090)
    at performUnitOfWork (react-dom.development.js:16416)
    at workLoop (react-dom.development.js:16454)
    at renderRoot (react-dom.development.js:16533)
    at performWorkOnRoot (react-dom.development.js:17387)
    at performWork (react-dom.development.js:17295)
    at performSyncWork (react-dom.development.js:17267)
    at requestWork (react-dom.development.js:17155)
    at scheduleWork (react-dom.development.js:16949)
    at scheduleRootUpdate (react-dom.development.js:17637)
    at updateContainerAtExpirationTime (react-dom.development.js:17664)
    at updateContainer (react-dom.development.js:17691)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.de...

Это продолжаетсядля многих страниц, но проблема, кажется, в ConnectedRouter;Я предполагаю, что это потому, что combineReducers в redux-loop изменяет тип ответа главного редуктора на что-то, что не совместимо с connectRouter(history)(rootReducer) в вызове createStore.

Это правильная проблема?Это поправимо?Можно ли использовать эти две библиотеки вместе?

Answer 1

Это уже поддерживается в v5 +.

Примечание к выпуску: https://github.com/supasate/connected-react-router/releases/tag/v5.0.0 PR: https://github.com/supasate/connected-react-router/pull/150

Answer 2

Существует открытый выпуск , который решит эту проблему, но пока это не будет сделано, он требует взлома.Я назвал CombineReducers с чем-то вроде этого (я использую неизменяемый JS. Но если вы не так просто конвертировать в это)

import { connectRouter } from 'connected-react-router/immutable';
import { Map } from 'immutable';

//....

const routerReducer = connectRouter(history)(() => fromJS({}));
return combineReducers(
  {
    foo: fooReducer,
    blah: blahReducer,
    router: (state, action) => {
      const routerStateWrapper = Map({router: state});
      const result = routerReducer(routerStateWrapper, action);
      return result.get('router');
    }
  }
)