问题描述
我是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等。此后,我运行了该项目,发现商店仍然保持原始状态。
因此,我搜索了解决此问题的原因和方法,并尝试将迁移添加到 persistconfig 中,以告知商店结构的变化。但是问题仍然存在。我应该怎么做才能将商店结构更改为我想要的结构?
来自auth.duck.js的迁移和PersistConfig :
const migrations = {
2: (state) => {
return {
...state,user: {
id: undefined,pic: undefined
},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,'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,password }
payload: { username: username,fullname: fullname,email: email,doRegisterSuccess: (data) => ({
type: actionTypes.REGISTER_SUCCESS,// payload: {data: data}
payload: {data: data}
//payload: data
}),doRegisterFail: (error) => ({
type: actionTypes.REGISTER_FAIL,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,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,password} = action
const {username,password} = action.payload
// const payload = {username,password}
let data
try {
// data = register(username,password)
data = yield call (register,username,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;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)