Redux History State
Redux state time traveling, optimized for pushState navigation
$ npm install --save redux-history-state
Creating a Reducer
var reduxHistoryState = ;var Immutable = ;const reducer = state = Immutable action;const createEnhancedReducer = reduxHistoryState;const enhancedReducer = ;
To create new pages, replace the current
redux-history-state offers a wrapper on top of the history API which will comply with the reducers navigation strategy.
var reduxHistoryState = ;store
Auto-respond to browser events
It can automaticly listen for changes to the current page, and commit the current page once it sees a page change. This means that it is easy to implement it along site existing routing solutions such as
TODO: Add example of react routing with redux-history-state
To automatically listen and respond to browser events, a store enhancer is needed as well as a
listen option for the reducer enhancer.
const createReducer = reduxHistoryState;var createStore = reduxvar store =
Fix Safari push state error (in-progress)
From Safari 9 a limitation on the history API has been enforced, limiting the page to a maximum of a hundred state changes (
replaceState). To work around this limitation to mitigation are includeded, and can be set on
reduxHistoryState.createReducer by passing in a
history.safariFixes.revertToHash switched to hash based URLs once it can no longer replace/update using the history API. this requires that the client side code understands hash navigation.
history.safariFixes.reloadPage when it can no longer use the history API it stores the state in the session and then reloads the page. Once that has been done, it will then reload the entire state from the session in order to revert to the previous state.
Manualy handle navigation
var reduxHistoryState =// Commits the current state, so a back action will lead to that statestore// Moves to the previous statestore// Moves to the next statestore