`push` из connected-response-router, используемый в эпике с наблюдаемым редуктором, не изменяет URL-адрес и отображает пустую страницу

push из "connected-response-router", используемого в эпосе redux-observable, не изменяет URL-адрес и отображает пустую страницу. state.router.location никогда не меняется, поэтому я думаю, что действие не отправляется должным образом, но компоненты больше не отображаются - это изменение, которое я не могу понять.

Приложение выглядит следующим образом:

В редукторах:

const rootReducer: Reducer<any, any> = history => combineReducers({
  router: connectRouter(history),
})

В конфигурации приложения:

const history = createBrowserHistory({
  basename: ROOT_PATH,
})

<Provider store={store}>
    <ConnectedRouter history={history}>
      <RootContainer />
    </ConnectedRouter>
</Provider>

const configureStore = (): Store => {
  return createStore(
    rootReducer(history),
    applyMiddleware(createEpicMiddleware(rootEpic)),
  )
}

В RootContainer.js

import { withRouter } from "react-router-dom"

const Root = withRouter(connect(mapStateToProps, mapDispatchToProps)(RootComponent))
export default Root

В былинах:

import { push } from "connected-react-router"

const navigateTo = (action$: ActionsObservable<Action>): ActionsObservable<Action> => (
  action$.pipe(
    ofType(SharedActions.OPEN_WINDOW),
    mergeMap((action) => {
      return of(push(action.payload.url))
    }),
  )
)

package.json

"connected-react-router": "^5.0.1",
"react": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"redux": "^3.6.0",
"redux-observable": "^0.17.0",
"rxjs": "^5.5.7",

У меня нет горячей замены модуля, как в этот пример, но я думаю, что это не связано.

ОБНОВЛЕНИЕ:

Я добавил эпики для прослушивания:

import { CALL_HISTORY_METHOD, LOCATION_CHANGE, push } from "connected-react-router"

Кажется, что отправляется следующее действие:

{
  type: "@@router/CALL_HISTORY_METHOD"
  payload: {
    args: [ "new/path" ]
    method: "push"
  }
}

Это просто не влияет на URL-адрес.

ОБНОВЛЕНИЕ

Также использование Link (response-router-dom) для прямого перехода к «новому / пути» отлично работает внутри компонентов, поэтому путь правильный.


react-router-v4 redux-observable connected-react-router
person Galya    schedule 09.11.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Похоже, вы забыли добавить routerMiddleware при создании своего магазина Redux: https://github.com/supasate/connected-react-router#step-2

Конфигурация вашего приложения выше должна быть:

import { routerMiddleware } from "connected-react-router";

const history = createBrowserHistory({
  basename: ROOT_PATH,
})

<Provider store={store}>
    <ConnectedRouter history={history}>
      <RootContainer />
    </ConnectedRouter>
</Provider>

const configureStore = (): Store => {
  return createStore(
    rootReducer(history),
    applyMiddleware(
      createEpicMiddleware(rootEpic),
      routerMiddleware(history),
    ),
  )
}
person alexristich    schedule 17.10.2019
comment
Можете ли вы добавить фрагмент кода, объясняющий, как это сделать? - person Joseph Budin; 17.10.2019