Окончательное обновление.Теперь все работает так, как должно!
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
:
Я отправляю действиевот так:
`const mapDispatchToProps = dispatch => bindActionCreators({
alterViewMode: changeViewMode,
searchMovies: searchMoviesRequest,
changeRoute: location => dispatch(push(location)),
}, dispatch)`
1-е обновление:
Я живу здесь, на github: https://tornado1979.github.io/movies-socket/.
- поиск фильма
нажмите либо на кнопку фильма, либо на ссылку (URL-адрес меняется, локально я получаю ошибку на кнопке, но ошибки на ссылке нет).
, когда я нажимаю «Кнопку»:
щелчок выдает эту ошибку:
Я пытаюсь обновить состояние при изменении маршрута, пока мне удалось только обновить состояние, 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>
Чего мне здесь не хватает, и я не могу заставить его работать?спасибо.