redux-persist
redux-persist copied to clipboard
React Native Redux-Persist not calling transformer on rehydrate
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
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
Facing this issue now on the latest v6