Question

我是React.js的初学者。因此，我正在使用keenthemes中的主题。它使用redux-persist和redux-saga对axios模拟样本进行身份验证。它的原始存储 initialState （持久）如下：

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调用，添加了更多操作，reduceor等。此后，我运行了该项目，发现商店仍然保持原始状态。

Store

因此，我搜索了解决此问题的原因和方法，并尝试将迁移添加到 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 })
}

来自auth.duck.js的

Reducer ：

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;
      }
    }
);

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

来自auth.duck.js的

Saga ：

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));
    }
  });

来自rootDuck.js的

rootReducer和rootSaga ：

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;

redux-persist中不会更新新的商店结构

0 个答案: