Redux History State

Redux state time traveling, optimized for pushState navigation

---

Installing

$ npm install --save redux-history-state

Usage

Creating a Reducer

var reduxHistoryState = require('redux-history-state');
var Immutable = require('immutable');
 
const reducer = (state = Immutable.Map({ number: 0 }), action) => {
  switch(action.type) {
    case 'INCEMENT':
      return state.set('number', state.get('number') + 1)
    default:
      return state;
  }
};
 
const createEnhancedReducer = reduxHistoryState.createReducer({});
 
const enhancedReducer = createEnhancedReducer(reducer);

Push/Replace pages

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.

Navigating

var reduxHistoryState = require('redux-history-state');
 
store.dispatch(reduxHistoryState.new(url, title))

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 react-routing

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.createReducer({
  listen: true,
  safariFix: history.safariFixes.revertToHash,
});
 
var createStore = redux.compose(
  history.browser.browserHistory(),
  redux.createStore
)
 
var store = createStore(
  redux.combineReducers({
    history: createReducer(reducer)
  })
)

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 (pushState and replaceState). To work around this limitation to mitigation are includeded, and can be set on reduxHistoryState.createReducer by passing in a safariFix option.

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 = require('redux-history-state')
 
// Commits the current state, so a back action will lead to that state
store.dispatch(reduxHistoryState.commit())
 
// Moves to the previous state
store.dispatch(reduxHistoryState.back())
 
// Moves to the next state
store.dispatch(reduxHistoryState.forward())