Use seamless-immutable with redux-persist v5

License: MIT License

JavaScript 100.00%

redux-persist seamless-immutable v5 happy-new-year-gift

redux-persist-seamless-immutable's Introduction

Update: just wanted to let you know it's been busy, but I am still actively using this project and will be converting it to TS (or at least adding some typings) and picking up those issues soon.

redux-persist-seamless-immutable

This package lets you use seamless-immutable on a per-reducer basis along with redux-persist v5.

Lots of people seem to have trouble with this, so I decided to cobble together a quick fix.

Update to v2: easy-to-fix breaking change; seamlessImmutableTransformer has changed to seamlessImmutableTransformCreator to better reflect its new status as a function.

Why

Why is this package for me?

You love using seamless-immutable with redux and redux-persist and found yourself enthusiastically upgrading to redux-persist v5.

Having read the redux-persist docs for v5 you already know that it no longer supports top-level immutable state. But you don't use immutable at that level -- you use it on a per-reducer basis, with top-level state still being a POJO.

You trod on. But, even after using a custom transformer, you then find v5 is consistently throwing you state.merge is not a function as soon as any immutable reducer changes state.

Usage

npm i redux-persist-seamless-immutable or yarn add redux-persist-seamless-immutable.

v5

import { seamlessImmutableReconciler, seamlessImmutableTransformCreator } from 'redux-persist-seamless-immutable'

const transformerConfig = {
  whitelistPerReducer: {
      reducerA: ['keyA', 'keyB']
  },
  blacklistPerReducer: {
      reducerB: ['keyC', 'keyD']
  }
}

const fooConfig = {
  key: 'foo',
  storage: LocalStorage,
  stateReconciler: seamlessImmutableReconciler,
  transforms: [seamlessImmutableTransformCreator(transformerConfig)]
}

tranformerConfig

The transformer can accept a config object with the following keys, which will allow you to white or blacklist specific keys per reducer.

{
  whitelistPerReducer: {
      reducerA: ['keyA', 'keyB']
  },
  blacklistPerReducer: {
      reducerB: ['keyC', 'keyD']
  }
}

Credits

The transformation is based on comments over at https://github.com/rt2zz/redux-persist/issues/133. Thanks to @josev55 and @robclouth. Also kind thanks to @aaronisme and @tasos14 for their contributions!

redux-persist-seamless-immutable's People

Contributors

Stargazers

Watchers

Forkers

orangejellyfish jpeer264 tasos14 gudog aaronisme uxzc doananh234 henrych4 schaener tamdao meterkishor

redux-persist-seamless-immutable's Issues

Bundle package properly using @pika/pack

The npm package has sloppy bundling. Let's fix that with @pika/pack..

Convert to TypeScript and add TS/Flow bindings

Since I'm converting some of my other code to TS, let's convert this as well and do whatever's needed to publish this for various platforms/ES versions.

Nested persist

Hello.
On using nested persist with a transform to seamless-immutable has a failure.
Transformer returns a plain js object. Not seamless-immutable.
On root level all right.

From fork: check if state is an object before transforming

gudog@fc70bde

Fails to compile

Hi, thanks for you efforts!
However, I'm having problems compiling this.

./node_modules/redux-persist-seamless-immutable/src/reconciler.js
Module parse failed: Unexpected token (9:19)
You may need an appropriate loader to handle this file type.

|   { debug, mergeDeep = false }
| ) => {
|   let newState = { ...reducedState };
|   // only rehydrate if inboundState exists and is an object
|   if (inboundState && typeof inboundState === 'object') {

My project uses create-react-app.
Node: v8.8.0

seamlessImmutableReconciler

I'm looking into using this library since I'm currently using seamless-immutable lib and an old version of redux persist.

I was wondering if this Reconciler matches autoMergeLevel2?

Thank you for your work on this lib 🥇

TypeError: Cannot read property ‘merge’ of undefined

At times the reconciler fails to merge and throws this error.
I was unable to pin point when exactly this happens or why.
Presumably after larger state structure change.

Uncaught (in promise) TypeError: Cannot read property ‘merge’ of undefined
   at reconciler.js:34
   at Array.forEach (<anonymous>)
   at s (reconciler.js:16)
   at persistReducer.js:91
   at n (reduxsauce.js:229)
   at l (createStore.js:165)
   at middleware.js:71
   at index.js:48
   at Object.dispatch (middleware.js:66)
   at Object.l [as rehydrate] (persistStore.js:87)
   at persistReducer.js:57
(anonymous) @ reconciler.js:34
s @ reconciler.js:16
(anonymous) @ persistReducer.js:91
n @ reduxsauce.js:229
l @ createStore.js:165
(anonymous) @ middleware.js:71
(anonymous) @ index.js:48
(anonymous) @ middleware.js:66
l @ persistStore.js:87
(anonymous) @ persistReducer.js:57
Promise.then (async)
(anonymous) @ persistReducer.js:56
Promise.then (async)
(anonymous) @ persistReducer.js:52
n @ reduxsauce.js:229
l @ createStore.js:165
(anonymous) @ middleware.js:71
(anonymous) @ index.js:48
(anonymous) @ middleware.js:66
s.persist @ persistStore.js:96
o @ persistStore.js:99
t.a @ CreateStore.js:37
t.a @ index.js:47
(anonymous) @ App.js:14
t @ bootstrap abaa5d98ccee410482ed:19
(anonymous) @ main.b4c585ff.js:71680
t @ bootstrap abaa5d98ccee410482ed:19
(anonymous) @ main.b4c585ff.js:65389
t @ bootstrap abaa5d98ccee410482ed:19
(anonymous) @ bootstrap abaa5d98ccee410482ed:62
(anonymous) @ bootstrap abaa5d98ccee410482ed:62

State.without is not a function.

Any idea what causing this:

Here's my codes:

import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import { persistReducer } from 'redux-persist';
import FilesystemStorage from 'redux-persist-filesystem-storage';
import { seamlessImmutableReconciler, seamlessImmutableTransformCreator } from 'redux-persist-seamless-immutable';
import reducers from '../reducers';

const transformerConfig = {
  whitelistPerReducer: {
    teams: ['logos'],
  },
  blacklistPerReducer: {
    competitions: ['items'],
  },
};


const persistConfig = {
  key: 'root',
  storage: FilesystemStorage,
  stateReconciler: seamlessImmutableReconciler,
  transforms: [seamlessImmutableTransformCreator(transformerConfig)],
};

const persistedReducer = persistReducer(persistConfig, reducers);

const isDebuggingInChrome = __DEV__ && !!window.navigator.userAgent;

const logger = createLogger({
  predicate: () => isDebuggingInChrome,
  collapsed: true,
  duration: true,
});
const createStoreWithMiddleware = applyMiddleware(logger)(createStore);

const store = createStoreWithMiddleware(persistedReducer);
if (isDebuggingInChrome) {
  window.store = store;
}

export default store;

However if I pass empty config object const transformerConfig = {}; everything works fine!

Fails on nested ImmutableSeamless reducer slices

transformer.js:32 Uncaught TypeError: Cannot convert undefined or null to object

Hello, I'm getting following error. how can i fix it? Thanks!
Config:
const transformerConfig = {
whitelistPerReducer: {

},
blacklistPerReducer: {

}
}

Error:
transformer.js:32 Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at transformer.js:32:1
at Object._in [as in] (createTransform.js:16:1)
at createPersistoid.js:66:1
at Array.reduce ()
at processNextKey (createPersistoid.js:65:1)

hilkeheremans / redux-persist-seamless-immutable Goto Github PK