У меня есть Ionic 3 App , где я использую ngrx store и effect для лучшей библиотеки управления состоянием, так как я разрабатываюбольшое приложение.Каждый поток данных работает нормально и гладко.Но есть одна маленькая проблема.
Если пользователь вышел из системы App , некоторые из состояний связаны с сеансом или информация о пользователе очищено , но я хочу, чтобы очистить все состояния от каждого редуктора .
Как мне этого добиться?Вот что я сделал ниже:
в моем actions-events.ts
export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const LOGOUT_FAILED = 'LOGOUT_FAILED';
и в моем component.ts
logout() {
this.store.dispatch({ type: LOGOUT_REQUEST })
}
в моем effect.ts
@Effect()
deAuthenticate$ = this.actions$.ofType(authActions.LOGOUT_REQUEST)
.pipe(
switchMap(() => {
return this.authApi.signOut().pipe(
map((response: any) => ({ type: authActions.LOGOUT_SUCCESS, payload: response })),
catchError(error => of({ type: authActions.LOGOUT_FAILED, payload: error }))
)
})
)
Я объявил три типа действий, которые будут асинхронными в первом блоке кода.Затем компонент отправит действие LOGOUT_REQUEST.После этого эффект прослушает это действие и вызовет метод у провайдера , чтобы запросить http запрос на выход из системы на сервер .Я буду ждать ответа и отправлю действие SUCCESS или FAILED для обновления дерева состояний.
Теперь все работает нормально, но я замечаю, что есть немногопроблема в том, что некоторые данные существуют или сохраняются в хранилище или какой-либо части состояния .То, чего я не хочу, когда другой пользователь пытается войти в систему.
То, что я хочу, это очистить все дерево состояний, когда пользователь выходит из системы.Как я могу это сделать?
Для получения дополнительной информации о моей структуре вот мой authReducer ниже
import { LOGIN_REQUEST, LOGIN_FAILED, LOGIN_SUCCESS, LOGOUT_REQUEST, LOGOUT_SUCCESS, LOGOUT_FAILED } from './../actions/authenticate';
import { AuthState } from './../store';
import { Action } from '@ngrx/store';
import { PostState } from '../store';
const initialState: AuthState = {
isAuthenticated: false,
authenticating: false,
unauthenticating: false,
token: null,
error: null
}
export function authReducer(state = initialState, action: Action) {
switch (action.type) {
case LOGIN_REQUEST: // Sign in request
return {
...state,
authenticating: true,
}
case LOGIN_SUCCESS: // Sign in success
return {
...state,
authenticating: false,
isAuthenticated: true,
token: (<any>action).payload.data.token
}
case LOGIN_FAILED: // Sign in failed
return {
...state,
authenticating: false,
error: (<any>action).payload
}
case LOGOUT_REQUEST: // Sign out request
return {
...state,
unauthenticating: true
}
case LOGOUT_SUCCESS: // Signout success
return {
...state,
unauthenticating: false,
isAuthenticated: false,
token: null
}
case LOGOUT_FAILED: // Signout failed
return {
...state,
unauthenticating: false,
error: (<any>action).payload
}
default:
return state;
}
}
и в моем rootReducer
import { postsReducer } from "../reducers/posts";
import { usersReducer } from "./users";
import { authReducer } from "./authenticate";
export const rootReducer = {
posts: postsReducer,
users: usersReducer,
auth: authReducer,
}
в моем app.module.ts Я использовал регистратор для регистрации дерева состояний.
export function logger(reducer: ActionReducer<any>): any {
// default, no options
return storeLogger()(reducer);
}
export const metaReducers = [logger];
и в import
StoreModule.forRoot(rootReducer, { metaReducers }),
EffectsModule.forRoot(effects),
StoreDevtoolsModule.instrument({
maxAge: 15
}),
Благодарим вас за помощь.Заранее спасибо.