rt2zz / redux-persist-transform-immutable

immutable support for redux-persist
112 stars 42 forks source link

Setup with v5 #28

Closed chrisregner closed 6 years ago

chrisregner commented 6 years ago

I've been jumping back and forth from the docs of redux-persist, redux-persist-immutable, and redux-persist-transform-immutable, but I just can't make it work. This is how my current setup looks like:

import { createStore, combineReducers } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import immutableTransform from 'redux-persist-transform-immutable'
import storage from 'redux-persist/es/storage'

const configureStore = () => {
  const persistorConfigFoo = {
    key: 'foo'
    transforms: [immutableTransform()],
    storage,
  }

  const persistorConfigBar = {
    key: 'bar'
    transforms: [immutableTransform()],
    storage,
  }

  const reducers = {
    foo: persistReducer(persistorConfigFoo, fooReducer),
    bar: persistReducer(persistorConfigFoo, barReducer),
  }

  const rootReducer = combineReducers(persistedReducers)

  const store = createStore(rootReducer, undefined)
  const persistor = persistStore(store)

  return { persistor, store } // consume this with PersistorGate and Provider respectively
}

export default configureStore

Where am I doing wrong? With this, when persist/PERSIST action is dispatched, it seems to replace the initial/default state tree with serialized version of it.

chrisregner commented 6 years ago

I also get Uncaught TypeError: transformer.in is not a function when I run my app after clearing the cookies.

chrisregner commented 6 years ago

I got it, it was silly mistake.

For some reason, I wasn't thinking that persistReducer can actually handle the root reducer itself, not just the sub-reducers. This is how it looks now:

import { createStore, combineReducers } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import immutableTransform from 'redux-persist-transform-immutable'
import storage from 'redux-persist/es/storage'

const configureStore = () => {
  const persistorConfig = {
    key: 'root'
    transforms: [immutableTransform()],
    storage,
  }

  const reducers = {
    foo: fooReducer,
    bar: barReducer,
  }

  const rootReducer = combineReducers(persistedReducers)
  const persistedRootReducer = persistReducer(persistorConfig, rootReducer)

  const store = createStore(persistedRootReducer, undefined)
  const persistor = persistStore(store)

  return { persistor, store } // consume this with PersistorGate and Provider respectively
}

export default configureStore
chrisregner commented 6 years ago

I made a PR to include this in README. I'll close this issue.