Redux-persist: README should show usage with `compose` and `applyMiddleware`

Created on 4 Jan 2017  路  4Comments  路  Source: rt2zz/redux-persist

For many people, redux-persist is the first library they use which exposes an enhancer, rather than a middleware. This seems to cause a lot of confusion for people who don't read much past the README. Currently the opening example is:

import {persistStore, autoRehydrate} from 'redux-persist'
const store = createStore(reducer, undefined, autoRehydrate())
persistStore(store)

Maybe it'd be friendlier to show a more realistic example, since everyone uses applyMiddleware in real life:

import {compose} from 'redux'
import {persistStore, autoRehydrate} from 'redux-persist'
const store = createStore(reducer, undefined, compose(applyMiddleware({}), autoRehydrate())
persistStore(store)

I'd happily open a PR to do so, but I thought I should ask first.

Most helpful comment

In case anybody was wondering, I got my isomorphic react app (using Next.js) working with an enhancer this way

import { createStore, applyMiddleware, compose } from 'redux'
import reducers from './reducers'
import thunkMiddleware from 'redux-thunk'
import { persistStore, autoRehydrate } from 'redux-persist'

const enhancer = compose(
  autoRehydrate(),
  applyMiddleware(thunkMiddleware)
)

// initStore
export default (reducers, initialState, isServer) => {
  if (isServer && typeof window === 'undefined') {
    return createStore(reducers, initialState || {}, applyMiddleware(thunkMiddleware));
  } else {
    if (!window.store) {
      window.store = createStore(reducers, initialState || {}, enhancer)
    }
    persistStore(store)
    return window.store
  }
}

Hope this helps someone!

All 4 comments

Thanks for the example 馃榿. Would indeed be a nice addition to the readme!

In case anybody was wondering, I got my isomorphic react app (using Next.js) working with an enhancer this way

import { createStore, applyMiddleware, compose } from 'redux'
import reducers from './reducers'
import thunkMiddleware from 'redux-thunk'
import { persistStore, autoRehydrate } from 'redux-persist'

const enhancer = compose(
  autoRehydrate(),
  applyMiddleware(thunkMiddleware)
)

// initStore
export default (reducers, initialState, isServer) => {
  if (isServer && typeof window === 'undefined') {
    return createStore(reducers, initialState || {}, applyMiddleware(thunkMiddleware));
  } else {
    if (!window.store) {
      window.store = createStore(reducers, initialState || {}, enhancer)
    }
    persistStore(store)
    return window.store
  }
}

Hope this helps someone!

@ypyang237 you helped me, i love you!

@ypyang237 - awesome putting autoRehydrate() inside compose()!
@ucarion - nice issue - and should this be closed now?

Was this page helpful?
0 / 5 - 0 ratings