Реагировать на состояние маршрутизатора и редукции, изменять URL, но не отображать маршрут - PullRequest
0 голосов
/ 03 июня 2018

Окончательное обновление.Теперь все работает так, как должно!

github: https://tornado1979.github.io/movies-socket
1. Обновите реакцию-маршрутизатор-редуктор -> "реагировать-маршрутизатор-редуктор": "^ 5.0.0-альфа.9 "
2. изменил способ отправки push (местоположение) следующим образом:
const mapDispatchToProps = dispatch => bindActionCreators({ changeRoute: location => push(location), }, dispatch)

2-е обновление:
1. Выглядит как реагирующий маршрутизатор-redux: 4.0.8 имеет проблемы с ReactDom.render ...
2. Обновлен до "act-router-redux ":" ^ 5.0.0-alpha.9 "и не более:

ReactDOM.render(... error

3.Теперь состояние маршрутизации обновляется + URL + компонент:
(a).например, <Link to="/movies-socket/1111">2nd more info</Link> работает!
(б).например, changeRoute: location => dispatch(push(location)), сначала работает, но выдает ошибку react-router-redux/es/middleware.js.
Uncaught TypeError: Cannot read property 'type' of undefined:

enter image description here

Я отправляю действиевот так:

`const mapDispatchToProps = dispatch => bindActionCreators({
     alterViewMode: changeViewMode,
     searchMovies: searchMoviesRequest,
     changeRoute: location => dispatch(push(location)),
 }, dispatch)`

1-е обновление:
Я живу здесь, на github: https://tornado1979.github.io/movies-socket/.

  1. поиск фильма
  2. нажмите либо на кнопку фильма, либо на ссылку (URL-адрес меняется, локально я получаю ошибку на кнопке, но ошибки на ссылке нет).

  3. , когда я нажимаю «Кнопку»:
    enter image description here

  4. щелчок выдает эту ошибку:
    enter image description here Я пытаюсь обновить состояние при изменении маршрута, пока мне удалось только обновить состояние, URL отказывается обновлять.В большинстве учебных пособий, которые я обнаружил, они используют для создания хранилища в одном файле с ReactDOM.render (....), но у меня они раздельные, я создаю хранилище и импортирую его в index.js.

store.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { routerMiddleware, routerReducer } from 'react-router-redux'
import createSagaMiddleware from 'redux-saga'
import thunk from 'redux-thunk'
import saga from './sagas'

import { moviesReducer as movies } from './modules/home/reducers/movies'
import { reducer as display } from './components/viewMode/reducers/viewMode'
import { history } from './helpers/history'

const routingMiddleware = routerMiddleware(history)
const sagaMiddleware = createSagaMiddleware()

const enhancers = []
const middleware = [
  routingMiddleware,
  sagaMiddleware,
  thunk,
]
if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.devToolsExtension 

if (typeof devToolsExtension === 'function') {
  enhancers.push(devToolsExtension())
 }
 }

const composedEnhancers = compose(
 applyMiddleware(...middleware),
 ...enhancers,
)

const store = createStore(
  combineReducers({
   display,
   movies,
   routing: routerReducer,
  }),
  composedEnhancers,
 )

  // start sagaMiddleware
  sagaMiddleware.run(saga)

  export default store

index.js ##

Я пробовал либо Router, либо ConnectedRouter, либо Router с реакции-маршрутизаторабез удачи.

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'

// 1. updates state , does not change url, error : TypeError: Cannot read property 'type' of undef
import { Router } from 'react-router-dom'

// 2. Element type is invalid: expected a string (for built-in components) 
   ... index.js
// import { ConnectedRouter as Router, syncHistoryWithStore } from 'react- 
   router-redux'

// 3. updates state , does not change url, error : TypeError: Cannot read 
   property 'type' of undef
// import { Router } from 'react-router'
import { history as browserHistory } from './helpers/history'

import store from './store'

import './index.css'
import App from './App'

const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render(
<Provider store={store}>
   <Router history={history}>
     <App />
   </Router>
 </Provider>,
 document.getElementById('root'),
)

app.js

import React, { Fragment } from 'react'
import './App.scss'

import { Routes } from './components/routes'
import { Footer } from './components/footer'
import { Header } from './components/header'

const App = () =>
(
<div className="App">
  <Fragment>
    <Header />
    <Routes />
    <Footer bgTemplate="template1" />
  </Fragment>
</div>)

export default App

history.js

import createHistory from 'history/createBrowserHistory'

export const history = createHistory()

history.listen((location, action) => {
  console.log(`The current URL is 
  ${location.pathname}${location.search}${location.hash}`)
    console.log(`The last navigation action was ${action}`)
  })

И внутри home.js , я отправляю действие push ('/') , которое обновляет состояние, но не загружает компонент ' moviedetails ' и url :

я показываю некоторые фрагменты 'home.js'

 /*dispatch the push action to change route*/
 const mapDispatchToProps = dispatch => bindActionCreators({  
  alterViewMode: changeViewMode,  
  searchMovies: searchMoviesRequest,   
  changeRoute: location => dispatch(push(location)),/* should go to 
  ':/movieId' */  
 }, dispatch)  


  /* Click the button or Link to redirect user to movie details*/
  /* this updates the state on both cases but not the url*/
  <div>
 <p className="panel-text">{movie.overview}</p>
    <button className="view-more" onClick={() => 
       this.props.changeRoute('/11111')}>1st more info </button>
          <Link to="/1111">2nd more info</Link>
        </div>

Чего мне здесь не хватает, и я не могу заставить его работать?спасибо.

...