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

Я сделал простое приложение реагирования с примером кода из следующего поста, который я оставляю только в качестве ссылки. В остальном я новичок в экосистеме 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 вызов.

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

Источник

1 ответ

Решение

Есть открытая проблема, которая решит эту проблему, но пока это не сделано, это требует взлома. Я назвал 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');
    }
  }
)
Источник

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

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

Источник
Другие вопросы по тегам