New store structure doesn't get updated in redux-persist - reactjs

Question

I am a beginner in React.js. So, I am using theme from keenthemes. And it uses redux-persist and redux-saga for authentication with axios mock samples. It's original store initialState (persisted) is like this:
const initialAuthState = {
user: undefined,
authToken: undefined
};
But I want to implement authentication in my own style. So I changed the store into this format:
const initialAuthState= {
user: {
id: undefined,
username: undefined,
fullname: undefined,
email: undefined,
pic: undefined
},
authToken: undefined,
isAuthorized: false,
error: undefined
}
Then, I implemented some other codes required for authentication such as API calls, add some more actions, reducers, etc. After that, I ran the project and I noticed that the store remains still like the original.
Store
So, I searched the reasons and ways to solve that case, and tried to add migrations into persistconfig to inform the change of store structure. But the problem still remains. What should I do to change the store structure into the one that I want?
Migrations and PersistConfig from auth.duck.js:
const migrations = {
2: (state) => {
return {
...state,
user: {
id: undefined,
username: undefined,
fullname: undefined,
email: undefined,
pic: undefined
},
authToken: undefined,
isAuthorized: false,
error: undefined
}
}
}
const persistConfig = {
storage,
version: 2,
key: "demo1-auth",
whitelist: ['user', 'authToken', 'isAuthorized'],
migrate: createMigrate(migrations, { debug: true })
}
Reducer from auth.duck.js:
export const reducer = persistReducer(
// { storage, key: "demo1-auth", whitelist: ['user', 'authToken', 'isAuthorized']/*["user", "authToken"]*/ },
persistConfig,
(state = initialAuthState, action) => {
switch (action.type) {
// case actionTypes.Login: {
// return {...state, error: ""}
// }
case actionTypes.LOGIN_SUCCESS: {
//const { data } = action.payload;
//return action.payload.data//data//{...state, data}
return {...state, user: action.payload.data, authToken: action.payload.authToken, isAuthorized: true}
}
case actionTypes.LOGIN_FAIL: {
return {...state, error: action.payload.error}
}
// case actionTypes.register: {
// return {...state, error: ""}
// }
case actionTypes.REGISTER_SUCCESS: {
//const { data } = action.payload;
//return action.payload.data//data
return {...state, user: action.payload.data}
}
case actionTypes.REGISTER_FAIL: {
return {...state, error: action.payload.error}
}
case actionTypes.Logout: {
routerHelpers.forgotLastLocation();
logout(action.payload.id)
return iniState;
}
default:
return state;
}
}
);
Actions from auth.duck.js:
export const actions = {
login: (email, password) => ({
type: actionTypes.Login,
//payload: { email, password }
payload: { email: email, password: password }
}),
doLoginSuccess: (data) => ({
type: actionTypes.LOGIN_SUCCESS,
payload: {data: data}
}),
doLoginFail: (error) => ({
type: actionTypes.LOGIN_FAIL,
payload: {error: error}
//payload: error
}),
register: (username, fullname, email, password) => ({
type: actionTypes.Register,
//payload: { email, password }
payload: { username: username, fullname: fullname, email: email, password: password }
}),
doRegisterSuccess: (data) => ({
type: actionTypes.REGISTER_SUCCESS,
// payload: {data: data}
payload: {data: data}
//payload: data
}),
doRegisterFail: (error) => ({
type: actionTypes.REGISTER_FAIL,
payload: {error: error}
//payload: error
}),
logout: (id) => ({
type: actionTypes.Logout,
payload: { id: id}
})
};
Saga from auth.duck.js:
export function* saga() {
yield takeLatest( actionTypes.Login, function* loginSaga(action) {
// const {email, password} = action
const {email, password} = action.payload
// const payload = {email, password}
let data;
try {
// data = login(email, password)
/* data = yield call (login, payload)*/ data = yield call (login, email, password)
// data = {...data, isAuthorized: true, error: undefined}
console.log("Data in takelatest login in auth.duck: ", data)
yield put(actions.doLoginSuccess(data))
}
catch (error) {
console.log("Login axios post error is!: ", error)
yield put(actions.doLoginFail(error))
}
});
yield takeLatest(actionTypes.Register, function* registerSaga(action) {
// const {username, fullname, email, password} = action
const {username, fullname, email, password} = action.payload
// const payload = {username, fullname, email, password}
let data
try {
// data = register(username, fullname, email, password)
data = yield call (register, username, fullname, email, password)
// data = {...data, isAuthorized: false, error: undefined}
console.log("Data in takelatest register in auth.duck: ", data)
yield put(actions.doRegisterSuccess(data));
}
catch (error) {
console.log("Login axios post error is!: ", error)
yield put(actions.doRegisterFail(error));
}
});
rootReducer and rootSaga from rootDuck.js:
import { all } from "redux-saga/effects";
import { combineReducers } from "redux";
import * as auth from "./ducks/auth.duck";
import { metronic } from "../../_metronic";
import * as candi from "./ducks/candidateForm.duck";
export const rootReducer = combineReducers({
auth: auth.reducer,
i18n: metronic.i18n.reducer,
builder: metronic.builder.reducer,
candidateForm: candi.reducer
});
export function* rootSaga() {
yield all([auth.saga()]);
}
store.js:
import { applyMiddleware, compose, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import { persistStore } from "redux-persist";
import { rootReducer, rootSaga } from "./rootDuck";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(sagaMiddleware))
);
export const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);
export default store;