Reactjs 新的商店结构没有';无法在redux中得到更新

Reactjs 新的商店结构没有';无法在redux中得到更新,reactjs,redux,redux-saga,redux-persist,Reactjs,Redux,Redux Saga,Redux Persist,我是React.js的初学者。所以,我使用的是keenthemes的主题。它使用redux persist和redux saga对axios模拟样本进行身份验证。它的原始存储初始状态(持久化)如下所示: const initialAuthState = { user: undefined, authToken: undefined }; 但我想以自己的风格实现身份验证。因此,我将存储更改为以下格式: const initialAuthState= { user: {

我是React.js的初学者。所以,我使用的是keenthemes的主题。它使用redux persist和redux saga对axios模拟样本进行身份验证。它的原始存储初始状态(持久化)如下所示:

const initialAuthState = {
    user: undefined,
    authToken: undefined
};
但我想以自己的风格实现身份验证。因此,我将存储更改为以下格式:

const initialAuthState= {
  user: {
    id: undefined,
    username: undefined,
    fullname: undefined,
    email: undefined,
    pic: undefined
  },
  authToken: undefined,
  isAuthorized: false,
  error: undefined
}
然后,我实现了身份验证所需的一些其他代码,如API调用、添加更多操作、简化程序等。之后,我运行了该项目,我注意到存储仍然与原来的一样

因此,我搜索了解决这种情况的原因和方法,并尝试将迁移添加到persistconfig中,以通知存储结构的更改。但问题依然存在。我应该怎么做才能将商店结构更改为我想要的结构

来自auth.duck.js的迁移和PersistConfig

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 })
}
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;
      }
    }
);
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}
  })
};
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));
    }
  });
来自auth.duck.js的Reducer

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 })
}
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;
      }
    }
);
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}
  })
};
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));
    }
  });
来自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 })
}
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;
      }
    }
);
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}
  })
};
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));
    }
  });
来自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 })
}
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;
      }
    }
);
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}
  })
};
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和rootSaga来自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;