React-Router-Redux: экспорт 'syncHistoryWithStore' не был найден в 'response-router-redux'

Я пытался интегрировать Redux в свое приложение, и у меня возникла проблема с использованием React-Router-Redux 5.0.0-alpha.6

Я получаю сообщение об ошибке: «export 'syncHistoryWithStore' не найден в 'response-router-redux'. Официальные руководства говорят об импорте syncHistoryWithStore, что я и сделал: https://github.com/reactjs/react-router-redux

Я также заглянул внутрь пакета response-router-redux, и, похоже, нет никаких признаков syncHistoryWithStore.

Что мне не хватает?

Вот мой index.js. Redux работает, но я не смог протолкнуть новый маршрут только с ConnectedRouter, и, видимо, это из-за вещи browserHistory.

import React from 'react';
import { render } from 'react-dom'
import { Provider } from 'react-redux';
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware, syncHistoryWithStore, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

const store = configure();
const history = syncHistoryWithStore(createBrowserHistory(), store);

const navigation = (
  <Provider store={store}>
      <ConnectedRouter history={history}>
          <SystemManager>
            <div>
            <Route path="/" component={Dashboard}/>
            <Route path="/dashboard" component={Dashboard} />
            .....

            <Route component={NotFound} />
            </div>
          </SystemManager>
      </ConnectedRouter>
    </Provider>
);
injectTapEventPlugin();

render(navigation, document.getElementById('app'));

Версии пакета:

react-redux: "^5.0.4",
react-router: "^4.1.1",
react-router-dom: "^4.1.1",
react-router-redux: "^5.0.0-alpha.6",

person user5156141    schedule 01.05.2017    source источник
comment
какая у вас версия реактивного маршрутизатора?   -  person aw04    schedule 01.05.2017
comment
Извините, я понял, что забыл эту информацию, как только вы прокомментировали. Просто добавил его в исходный пост.   -  person user5156141    schedule 01.05.2017
comment
круто, поэтому я думаю, что вы смотрите на документацию / пример из текущей версии, а не на альфа-версию, которую вы используете, я не вижу здесь упоминания об этой функции - ›github.com/ReactTraining/react-router/tree/master/packages/.   -  person aw04    schedule 01.05.2017
comment
Это сбивает с толку, потому что NPM показывает версию 4.0.8, но принудительно загружает 5.0.0. Я даже не хочу альфу. Как я могу указать получение стабильной версии, если npm загружает альфа-версию?   -  person user5156141    schedule 01.05.2017
comment
ну, я думаю, вам нужна альфа для использования с текущей версией реактивного маршрутизатора (который вы используете). да, это сбивает с толку, экосистема React движется очень быстро, что означает, что некоторые части опережают другие :)   -  person aw04    schedule 01.05.2017
comment
За этим действительно сложно угнаться. Я даже не осознавал, что проблема зависимости с реактивным маршрутизатором. Можете ли вы предложить известную стабильную версию для этих пакетов, которую я могу исправить в моем package.json? Мне просто нужно уметь пользоваться историей в магазине!   -  person user5156141    schedule 01.05.2017
comment
если бы это был я, я бы придерживался именно того, что у вас есть, но просто использовал ссылку, которую я предоставил выше, чтобы узнать, как использовать response-router-redux. ваш другой вариант - вернуться к версии response-router и response-router-redux, чтобы получить стабильность, при условии, что это не вызывает проблем совместимости с чем-либо еще   -  person aw04    schedule 01.05.2017
comment
Я использовал ту же настройку (с альфа-версией), и она работала нормально, чего стоит   -  person aw04    schedule 01.05.2017
comment
Просто внес поправки в свой проект, чтобы следовать этому. Теперь он работает! Спасибо.   -  person user5156141    schedule 01.05.2017
comment
Единственное, над чем я сейчас борюсь, это как программно изменить маршрут. This.props.history.push (routePath) сейчас не работает. Вернемся к документации!   -  person user5156141    schedule 01.05.2017
comment
круто рад, что у вас все заработало!   -  person aw04    schedule 01.05.2017
comment
проверьте withRouter HOC в документации, он позволяет вам получать историю в реквизитах   -  person aw04    schedule 01.05.2017
comment
Серьезно благодарю вас за руководство @ aw04, все в порядке!   -  person user5156141    schedule 01.05.2017
comment
user515614 есть обновления по этому поводу? я не могу это сделать   -  person Mr.G    schedule 15.06.2017


Ответы (1)


Для всех, кто столкнется с такой же проблемой, я опубликую свой рабочий файл index.js (примечание: я оставил свои пользовательские компоненты и редукторы для дальнейшего руководства).

Я сейчас не использую syncHistoryWithStore. Я использую плагин history/createBrowserHistory и создаю историю для ConnectedRouter. Вроде пока все работает ..

Я использую Redux DevTools, а также использую среды узлов для переключения между режимами разработки и производства.

Очевидно, никакой гарантии не предоставляется.

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

import { Provider } from 'react-redux'

import createHistory from 'history/createBrowserHistory'
import { Route, Switch } from 'react-router'

import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';

import menu from './reducers/menu';
import permissions from './reducers/permissions';
import sitePreferences from './reducers/sitePreferences';
import user from './reducers/user';


// Custom Page Container Imports (these are the visual layout components)
import SystemManager from './containers/systemManager/systemManager';

import LoginPage from './containers/pages/login-page/';
import NotFound from './containers/pages/not-found/not-found';

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history)

const isProduction = process.env.NODE_ENV === 'PRODUCTION';

// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Redux: Store creation and middleware application based on production/development mode
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
let store = null;

if (isProduction === true) {
  store = createStore(
    combineReducers({
        menu,
        permissions,
        sitePreferences,
        user,
        routerReducer
      }),
  compose(applyMiddleware(middleware))
);

} else {

  store = createStore(
    combineReducers({
        menu,
        permissions,
        sitePreferences,
        user,
        routerReducer
      }),
  composeWithDevTools(applyMiddleware(middleware))
);

}
injectTapEventPlugin(); // Material UI

ReactDOM.render(
  <Provider store={store}>
    { /* ConnectedRouter will use the store from Provider automatically */ }
    <ConnectedRouter history={history}>
      <SystemManager>
        <Switch>
          <Route path="/dashboard" component={NotFound} />
          <Route path="/login" component={LoginPage} />
        </Switch>
      </ SystemManager>

    </ConnectedRouter>
  </Provider>,
  document.getElementById('app')
)
person user5156141    schedule 01.09.2017
comment
Какие версии наконец? - person EdG; 28.01.2018
comment
Это работает с: response-redux: ^ 5.0.4, response-router: ^ 4.1.1, response-router-dom: ^ 4.1.1, response-router-redux: ^ 5.0.0-alpha.6, (и новее) - person user5156141; 28.04.2018