redux-persist-transform-immutable icon indicating copy to clipboard operation
redux-persist-transform-immutable copied to clipboard

transform-immutable not working with transform-encrypt (v5 issue)

Open Flollipop opened this issue 7 years ago • 1 comments

Hi,

I facing some issues to use transform-immutable and transform-encrypt with redux-persist v5.

I managed to use transform-immutable alone.

But when I try to use encrypt with it I get some issues.

in the persist's config file:

const persistConfig = {
   transforms: [ encryptor, immutableTransform() ],
   key: 'root',
   storage: storage,
   debug: true
};

Give an object state (immutable not working when get data from storage). It's like immutableTransform return exactly what it get from encryptor.

So it seems when writing transform-encrypt accept transform-immutable data but when reading immutable-transform does nothing.

const persistConfig = {
	transforms: [ immutableTransform(),  encryptor],
	key: 'root',
	storage: storage,
	debug: true
};

Give an empty state after attempting rehydratation.

If found some old related issues, but seems code is not the same now. https://github.com/maxdeviant/redux-persist-transform-encrypt/issues/2

An idea where the conflict between this two package can be? Is it relevant to update encrypt or immutable, or create an transform between this two?

Thank you for your work.

Flollipop avatar May 09 '18 18:05 Flollipop

In the first time I've tried a dumy custom temporary transform between encrypt and immutable, pending v5 support

const myV4ToV5Transform = createTransform( 
	(inboundState, key) => JSON.parse(inboundState),
	
	(outboundState, key) => JSON.stringify(outboundState)
);

const persistConfig = {
	transforms: [ immutableTransform(), myV4ToV5Transform, encryptor ],
	key: 'root',
	storage: storage,
	debug: true
};

after some reflexion I came with this solution using immutable functions, to completely replace immutable Transform.

export const myImmutableTransform = createTransform(
	(inboundState) => inboundState.toJS(),

	(outboundState) => fromJS(outboundState),

	{ blacklist: [ '_persist' ] }
);

Flollipop avatar May 15 '18 14:05 Flollipop