Как перенаправить URL-адрес после обновления состояния в приложении реагировать на избыточность?
У меня есть простое приложение "Реакция редукса", использующее "Реакция-маршрутизатор-редукция". У меня есть 2 маршрута, один feed
другой add
, Представление добавления предоставляет форму. На бланке представления ADD_STORY
действие отправлено, и мой редуктор правильно устанавливает новое состояние с добавленной историей. Проблема в том, что я хотел бы перенаправить в этот момент feed
Посмотреть. Мой текущий подход ниже не работает. Любая помощь будет принята с благодарностью.
мои глубины:
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^4.4.6",
"react-router-dom": "^4.0.0",
"react-router-redux": "^5.0.0-alpha.4",
"redux": "^3.6.0"
index.js
//... other imports above
import { HashRouter } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
// 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)
// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
reducers,
applyMiddleware(middleware)
)
const render = () => {
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<ConnectedRouter history={history}>
<HashRouter>
<div className={styles.app}>
<Header />
<div>
<Route exact path="/" component={Feed} />
<Route exact path="/add" component={AddStory} />
</div>
<Footer />
</div>
</HashRouter>
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('root')
);
};
Затем я в другой части моего кода попытки перенаправить из компонента контейнера
const mapDispatchToProps = (dispatch, ownProps) => {
console.log('ownProps', ownProps)
return {
submitStory: (story) => {
dispatch(createStory({
title: story.match(/^(.+)\n?/)[1],
body: story
}))
},
doAction: (action) => {
switch(action) {
case "STORY_ADDED":
console.log('PUSHING');
ownProps.history.push('/')
dispatch(push('/'))
break;
default:
return null
}
}
}
}
Есть несколько проблем, с которыми я сталкиваюсь. Во-первых, если я попытаюсь dispatch(ownProps.history.push('/')
Я получаю ошибку в промежуточном программном обеспечении о action
быть неопределенным. Это легко понять, так как ownProps.history.push('/')
возвращает неопределенное значение; хотя он будет перенаправлять; но только один раз. Если я попытаюсь использовать push
это исходит от react-router-redux
Я правильно понимаю action
объект возвращен, но без перенаправления dispatch(push('/'))
,
Как вы видите, я попытался исправить ситуацию, позвонив ownProps.history.push('/')
затем диспетчеризация с помощью push-router-router-redux, чтобы у меня был правильный объект действия, но это работает только один раз. Мой компонент shouldComponentUpdate
метод никогда не срабатывает при обновлении состояния; хотя новое государство явно произведено; добавление новой истории в представление, к которому я пытаюсь перенаправить.
Еще раз спасибо.