johanneslumpe / redux-history-transitions Goto Github PK

With the advent of react-router 1.0 there have been great API improvements. For this project the main part is that the user can now provide a history instance to the router. Since the history object is not specific to react-router and can be used with any type of router, the current library name isn't fitting anymore. I am proposing to rename this from redux-react-router-transitions to redux-history-transitions in order to make clear that this library works with any system which uses a history instance to manage url-state.

Furthermore the use of history introduces breaking changes. Originally you were able to return an object with a shape of { path, params, query, replace } and the library would then utilize react-router to merge params into path and append query as query-string.

This shape has changed and now looks like this: { path, query, replace, state }. This means that instead of returning a path like /some/path/:myParam, you now will use template strings to inject the params directly: /some/path/${myParamVar}. In order to use query strings, you will have to enhance the history object with the useQueries enhancer. How this works can be seen in the example project.

All in all what this means is that redux-history-transitions now can be used whether you are using react or angular or whatever view library/framework you prefer, as long as you use history to manage your urls. This also means that I will be dropping support for react-router 0.13

The code in the master branch is updated and a working example is provided.

I would love to hear some opinions about this (suggestions to improve the API are also welcome!).
I personally feel that this is the way to go.

/cc @gaearon @idolize

Currently the transition function gets called all the time and the consumer has to decide whether to return anything depending on the state of the action. This boilerplate should be moved into the library.

Currently:

meta: {
  transition: (prevState, nextState, action) => { ... }
}

Next version:

meta: {
  transition: {
    // catch-all handler which gets called for each
    // action state (begin and success/failure)
    onAction: (prevState, nextState, action) => { ... }

    // gets only called for a successful async action
    onSuccess: (prevState, nextState, action) => { ... },

    // gets only called for a failed async action
    onFailure: (prevState, nextState, action) => { ... }
  }
}

I'm running into a weird issue where the URL changes when i use a meta attribute with a transition in my actions but the view does not actually change.

My configureStore() method looks like this:

import { compose, applyMiddleware, createStore } from 'redux'
import { persistStore, autoRehydrate } from 'redux-persist'
import { localStorage } from 'redux-persist/storages';
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import handleTransitions from 'redux-history-transitions';
import createHistory from 'history/createBrowserHistory'
import { routerMiddleware } from 'react-router-redux'

import reducers from '../reducers'

const loggerMiddleware = createLogger()

export default function configureStore() {
  const history = createHistory()
  const enhancer = handleTransitions(history)
  
  const store = createStore(
    reducers,
    undefined,
    compose(
      applyMiddleware(
        thunkMiddleware,
        loggerMiddleware,
        routerMiddleware(history),
      ),
      enhancer,
      autoRehydrate()
    )
  )

  // begin periodically persisting the store
  persistStore(store, { storage: localStorage })

  return store;

}

And my action looks like this:

function addedDish(restaurantID, json) {
  return {
    type: NEW_DISH,
    dish: json,
    restaurantID,
    receivedAt: Date.now(),
    meta: {
      done: true,
      transition: {
        success: (prevState, nextState, action) => ({
          pathname: `/${restaurantID}/dishes/${action.dish.id}/`,
        }),
      },
    },
  }
}

The dish is added, the action triggered, and the URL changes, but the view is not re-rendered. 'normal' react-router changes triggered with Link or Redirect do work as expected.

Did i misconfigure the enhancer somehow or should i look elsewhere for the culprit?

How to use standard navigation actions of react-router, i.e. goBack(), replace() etc?

Hi

Is this able to handle an async action?

thanks

Should replace pushState & replaceState with push & replace (deprecated in https://github.com/rackt/history/blob/master/CHANGES.md#v1140) and use location descriptor as shown here: https://github.com/rackt/history#basic-usage

I can provide pull request on monday if someone does not beat me to it.