Отправка Redux и изменение URL
У меня есть следующее приложение:
index.js
const store = createStore(rootReducers, applyMiddleware(createLogger()));
store.dispatch(fetchArticles());
ReactDOM.render(
<Provider store = {store}>
<Router>
<Switch>
<Route exact path='/' component = {ArticlesPage}/>
<Route path='/search' component = {SearchPage}/>
</Switch>
</Router>
</Provider>,
document.getElementById('root')
);
ArticlesPage.js
const ArticlesPage = ({groups, onSearch}) => (
<Grid>
<SearchBoxWithImages onSearch = {onSearch}/>
<CategorySections groups = {groups}/>
</Grid>
);
const mapStateToProps = state => ({
groups: state.articles.groups
});
const mapDispatchToProps = dispatch => ({
onSearch: (q) => dispatch(searchArticles(q))
});
export default withRouter(connect(
mapStateToProps,
mapDispatchToProps
)(ArticlesPage));
fetchArticles и searchArticles - это сокращенные действия.
Я хочу разобраться с этим делом:
- введите сайт (url
/) - после поиска, обрабатываемого компонентом
SearchBoxWithImages, я хочу изменить URL-адрес на/search?q=term(термин - это обратный вызов от обработчикаonSearch) - вызовите действие
searchArticles, чтобы установить состояние redux
На данный момент изменено только состояние (из-за вызова действия searchArticles). URL-адрес не изменился, поэтому контейнер SearchPage не был вызван.
Я не использовал никаких методов history.push, потому что не знаю, как это сделать наилучшим образом. Перед использованием redux я получаю маршрутизатор из контекста и управляю состоянием по-своему, но теперь я хочу использовать redux для управления состоянием приложения.
Посмотрите на этот вопрос и предоставленные ответы: stackoverflow.com/questions/42701129/… Есть много полезной информации. Также есть альтернативный способ изменить навигацию с помощью React Router Redirect: reacttraining.com/react-router/web/api/Redirect
Ответы 1
Создайте такой объект истории
import createBrowserHistory from 'history/createBrowserHistory';
export default createBrowserHistory({});
Примените его к своему роутеру
import React from 'react';
import {Router, Route, Switch} from 'react-router-dom';
import history from '../services/history';
export default class App extends React.Component {
render() {
return (
<div>
<Router history = {history}>
{mainSwitch}
</Router>
</div>
);
}
}
Везде, где вы хотите программно изменить маршрут, сделайте следующее
import history from '/path/to/history'
history.push('/path/you/want/to/go/to')
Это также можно вызвать в вашем действии redux, чтобы вы могли вызвать history.push после того, как ваше действие закончилось.
Спасибо! Вы думаете, что действие redux - лучшее место для вызова диспетчера истории и отправки URL-адреса новостей? И дополнительный вопрос: есть ли способ не использовать сторонние библиотеки, используя только реакцию и сокращение?
В вашем случае это было бы сложно или очень запутанно. Однако вы можете визуализировать другой компонент на основе изменения состояния, как в примере private route в react routerreacttraining.com/react-router/web/example/auth-workflow
Пожалуйста, примите ответ, если он был полезен, спасибо.
Я нашел лучший шаблон, используя реактивный маршрутизатор. Я могу ввести в объект истории mapDispatchToProps и использовать его в действии.
Разве вы не можете использовать history.push в своем конструкторе действий searchArticles? Или вы используете, но URL-адрес не меняется, и в этом проблема?