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

React Native Redux-Persist not calling transformer on rehydrate

Open lxinghe opened this issue 4 years ago • 1 comments

Environment Expo CLI 3.28.5 environment info: System: OS: Windows 10 10.0.18363 Binaries: Node: 12.17.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - E:\react-native\moego\node_modules.bin\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6514223 npmPackages: expo: ^39.0.4 => 39.0.4 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2 react-native-web: ~0.13.7 => 0.13.18 react-navigation: ^2.4.1 => 2.18.3 Expo Workflow: managed

Description: outbound callback not triggered on rehydrate when applying transform

// test reducer in test.tsx import AsyncStorage from '@react-native-community/async-storage'; import {createTransform, persistReducer} from 'redux-persist';

export interface ITest { set: Set; }

const initialState: ITest = { set: new Set([1, 2, 3, 4, 5, 6, 7]), };

const testReducer = function(state= initialState, action: {type: string, payload: Set}) { switch (action.type) { case 'update': return Object.assign({}, state, action.payload); default: return state; } };

export const SetTransform = createTransform( // transform state on its way to being serialized and persisted. (inboundState: ITest, key) => { // convert mySet to an Array. console.log('inboundstate', inboundState); const {set} = inboundState; return Object.assign({}, inboundState, {set: [...set]}); }, // transform state being rehydrated (outboundState, key) => { // convert mySet back to a Set. console.log('outboundState', outboundState); return {...outboundState, set: new Set(outboundState.set)}; }, // define which reducers this transform gets called for. {whitelist: ['test']}, );

const testPersistConfig = { key: 'test', storage: AsyncStorage, debug: DEV, };

export default persistReducer(testPersistConfig, testReducer);

// reducer/index.tsx import {combineReducers} from 'redux'; import {StateType} from 'typesafe-actions'; import {persistReducer} from 'redux-persist'; import AsyncStorage from '@react-native-community/async-storage'; import test, {SetTransform} from './test';

const rootPersistConfig = { key: 'root', storage: AsyncStorage, transforms: [SetTransform], debug: DEV, };

const reducers = persistReducer(rootPersistConfig, combineReducers({ test, }));

export default reducers; export type AppState = StateType

// the inbound callback function of the transform is called before persisting, but the outbound callback function has never been called before rehydrate. Is this the problem for react native? or just certain version

lxinghe avatar Nov 24 '20 04:11 lxinghe

Facing this issue now on the latest v6

jayesbe avatar Jun 29 '22 18:06 jayesbe