Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
redux-first-routing
Advanced tools
Achieve client-side routing the Redux way:
This library wraps history
and provides a minimal, framework-agnostic base for accomplishing Redux-first routing. It does not provide the actual router component.
Instead, you can pair it with a compatible router to create a complete routing solution. If you're coming from React Router, you might compare this package to react-router-redux
.
Install the library from npm:
npm install --save redux-first-routing
Or, use the following script tag to access the latest UMD build on window.ReduxFirstRouting
:
<script src="https://unpkg.com/redux-first-routing/dist/redux-first-routing.min.js"></script>
import { combineReducers, applyMiddleware, createStore } from 'redux'
import { createBrowserHistory, routerReducer, routerMiddleware, startListener, push } from 'redux-first-routing'
import { otherReducers } from './reducers'
// Create the history object
const history = createBrowserHistory()
// Add the reducer, which adds location state to the store
const rootReducer = combineReducers({
...otherReducers,
router: routerReducer // Convention is to use the "router" property
})
// Build the middleware, which intercepts navigation actions and calls the corresponding history method
const middleware = routerMiddleware(history)
// Create the store
const store = createStore(rootReducer, {}, applyMiddleware(middleware))
// Start the history listener, which automatically dispatches actions to keep the store in sync with the history
startListener(history, store)
// Now you can read the location from the store!
let currentLocation = store.getState().router.pathname
// You can also subscribe to changes in the location!
let unsubscribe = store.subscribe(() => {
let previousLocation = currentLocation
currentLocation = store.getState().router.pathname
if (previousLocation !== currentLocation) {
console.log(`Location changed from ${previousLocation} to ${currentLocation}`)
// Render your application reactively here (optionally using a compatible router)
}
})
// And you can dispatch navigation actions from anywhere!
store.dispatch(push('/about'))
There are dozens of ways to design the state shape of the location data, and this project must by nature choose an opinionated design:
// URL: www.example.com/nested/path?with=query#and-hash
{
router: {
pathname: '/nested/path/',
search: '?with=query',
queries: {
with: 'query'
},
hash: '#and-hash'
}
}
If the current design doesn't fit your needs, feel free to open an issue or fork the project.
For a routing library to work seamlessly with redux-first-routing
, it must not be heavily coupled with the browser history. For example, React Router wraps its own instance of history
, so a more integrated solution like react-router-redux
is necessary.
The following libraries provide router components that just focus on the routing and/or rendering part, making them great matches for redux-first-routing
:
For full examples of usage, see Recipies. To add to this list, feel free to send a pull request.
Contributions are welcome and are greatly appreciated! :tada:
Feel free to file an issue, start a discussion, or send a pull request.
MIT
FAQs
Redux-first routing
The npm package redux-first-routing receives a total of 462 weekly downloads. As such, redux-first-routing popularity was classified as not popular.
We found that redux-first-routing demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.