{"library":"react-router-redux","title":"React Router Redux Sync","description":"react-router-redux, specifically version 4.0.8, provided \"ruthlessly simple bindings\" to keep React Router (versions 2.x and 3.x) and Redux in sync. Its primary purpose was to store React Router's location state within the Redux store, enabling features like time-travel debugging with Redux DevTools. It offered middleware to dispatch navigation actions and a reducer to manage router state. The library itself was noted as 'beta software' in its README. While `react-router-redux` version 5.x was intended for React Router 4.x, the repository for this project has been archived since October 26, 2018, rendering it abandoned. Modern React applications typically use `@reduxjs/toolkit` and `react-router-dom` directly, often with `connected-react-router` (a spiritual successor) or `redux-first-history` for similar state synchronization needs, rather than this deprecated package.","language":"javascript","status":"abandoned","last_verified":"Tue Apr 21","install":{"commands":["npm install react-router-redux"],"cli":null},"imports":["import { ConnectedRouter } from 'react-router-redux'","import { routerReducer } from 'react-router-redux'","import { routerMiddleware } from 'react-router-redux'","import { push } from 'react-router-redux'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createStore, combineReducers, applyMiddleware } from 'redux';\nimport { Provider } from 'react-redux';\nimport createHistory from 'history/createBrowserHistory';\nimport { Route } from 'react-router';\nimport { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';\n\n// Placeholder for your application's reducers\nconst reducers = (state = {}, action) => state;\n\n// Placeholder components\nconst Home = () => <div>Home</div>;\nconst About = () => <div>About</div>;\nconst Topics = () => <div>Topics</div>;\n\n// Create a history of your choosing (e.g., browser history)\nconst history = createHistory();\n\n// Build the middleware for intercepting and dispatching navigation actions\nconst middleware = routerMiddleware(history);\n\n// Add the routerReducer to your store on the `router` key\n// Also apply our middleware for navigating\nconst store = createStore(\n  combineReducers({\n    ...reducers,\n    router: routerReducer\n  }),\n  applyMiddleware(middleware)\n);\n\n// Example of dispatching a navigation action (can be done from anywhere)\n// setTimeout(() => {\n//   store.dispatch(push('/about'));\n// }, 2000);\n\nReactDOM.render(\n  <Provider store={store}>\n    { /* ConnectedRouter will use the store from Provider automatically */ }\n    <ConnectedRouter history={history}>\n      <div>\n        <Route exact path=\"/\" component={Home}/>\n        <Route path=\"/about\" component={About}/>\n        <Route path=\"/topics\" component={Topics}/>\n      </div>\n    </ConnectedRouter>\n  </Provider>,\n  document.getElementById('root')\n);\n","lang":"javascript","description":"This quickstart demonstrates how to set up `react-router-redux` with `redux` and `react-router` (v4.x is assumed for `ConnectedRouter` from the README, despite the package version being 4.0.8, implying a common usage pattern at the time of the README update). It shows combining reducers, applying the router middleware, and using `ConnectedRouter` to synchronize browser history with the Redux store.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}