REDUX
Vous pouvez également utiliser react-router-redux
qui a goBack()
etpush()
.
Voici un pack d'échantillonneur pour cela:
Dans le point d'entrée de votre application, vous avez besoin ConnectedRouter
, et une connexion parfois délicate à connecter est l' history
objet. Le middleware Redux écoute les changements d'historique:
import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import client from './components/apolloClient'
import store, { history } from './store'
import Routes from './Routes'
import './index.css'
render(
<ApolloProvider client={client}>
<Provider store={store}>
<ConnectedRouter history={history}>
<Routes />
</ConnectedRouter>
</Provider>
</ApolloProvider>,
document.getElementById('root'),
)
Je vais vous montrer un moyen de brancher le history
. Notez comment l'historique est importé dans le magasin et également exporté en tant que singleton afin qu'il puisse être utilisé dans le point d'entrée de l'application:
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'
export const history = createHistory()
const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]
if (process.env.NODE_ENV === 'development') {
const { devToolsExtension } = window
if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension())
}
}
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)
export default store
Le bloc d'exemple ci-dessus montre comment charger les react-router-redux
assistants middleware qui terminent le processus de configuration.
Je pense que cette partie suivante est complètement extra, mais je vais l'inclure au cas où quelqu'un dans le futur en trouverait un avantage:
import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'
export default combineReducers({
routing, form,
})
J'utilise routerReducer
tout le temps car cela me permet de forcer le rechargement de composants qui ne sont normalement pas dus à shouldComponentUpdate
. L'exemple évident est lorsque vous avez une barre de navigation qui est censée se mettre à jour lorsqu'un utilisateur appuie sur un NavLink
bouton. Si vous suivez cette voie, vous apprendrez que la méthode de connexion de Redux utilise shouldComponentUpdate
. Avec routerReducer
, vous pouvez utilisermapStateToProps
pour mapper les modifications de routage dans la barre de navigation, ce qui déclenchera sa mise à jour lorsque l'objet d'historique changera.
Comme ça:
const mapStateToProps = ({ routing }) => ({ routing })
export default connect(mapStateToProps)(Nav)
Pardonnez-moi pendant que j'ajoute des mots-clés supplémentaires pour les personnes: si votre composant ne se met pas à jour correctement, examinez shouldComponentUpdate
en supprimant la fonction de connexion et voyez si elle résout le problème. Si tel est le cas, tirez sur routerReducer
et le composant se mettra à jour correctement lorsque l'URL change.
En terminant, après avoir fait tout cela, vous pouvez appeler goBack()
oupush()
tout moment!
Essayez-le maintenant dans un composant aléatoire:
- Importer dans
connect()
- Vous n'avez même pas besoin
mapStateToProps
oumapDispatchToProps
- Importer dans goBack et pousser depuis
react-router-redux
- Appel
this.props.dispatch(goBack())
- Appel
this.props.dispatch(push('/sandwich'))
- Vivez une émotion positive
Si vous avez besoin de plus d'échantillons, consultez: https://www.npmjs.com/package/react-router-redux