Строгий менеджер состояний для приложений на javascript
Хранилище - это отдельный объект, который содержит состояние хранилища и служит «единственным источником данных».
Чтобы создать хранилище, вам нужно создать класс и наследовать его от Store, передав тип и его начальное состояние.
import { Store, StoreConfig } from '@datorama/akita';
export interface SessionState {
token: string;
userDetails: UserDetails
}
export function createInitialState(): SessionState {
return {
token: '',
userDetails: null
};
}
@StoreConfig({ name: 'session' })
export class SessionStore extends Store<SessionState> {
constructor() {
super(createInitialState());
}
}
С этой настройкой вы получаете Store
следующими способами:
update(newStateFn: Partial<S> | state: Readonly<S> => S)
update()
- это основной метод API, который обновляет хранилище. Он получает функцию обратного вызова, которая
получает текущее состояние и возвращает новое неизменное состояние, которое будет новым значением хранилища.
import { SessionStore } from './session.store';
export class SessionService {
constructor(private sessionStore: SessionStore) {}
updateUserName(name: string) {
this.sessionStore.update(state => ({
userDetails: {
...state.userDetails,
name
}
}));
}
}
В приведенном выше примере мы вызываем метод update()
и возвращаем новое неизменное состояние. (обратите внимание,
что мы используем оператор
spread)
Вы можете пропустить функцию обратного вызова в двух случаях:
1 Если вам нужно передать весь объект состояния, например:
import { SessionStore } from './session.store';
export class SessionService {
constructor(private sessionStore: SessionStore) {}
login(creds) {
httpProvider.login(creds).subscribe(({token, userDetails}) => {
this.sessionStore.update({
token,
userDetails
});
});
}
}
2 Когда вы хотите обновить корневой ключ состояния, например:
import { SessionStore } from './session.store';
export class SessionService {
constructor(private sessionStore: SessionStore) {}
updateDetails(userDetails) {
httpProvider.updateDetails(userDetails).subscribe(({ userDetails }) => {
this.sessionStore.update({
userDetails
});
});
}
}
setLoading(isLoading: boolean)
- Обновить состояние загрузки store.setError(error: any)
- Обновить состояние ошибки store.destroy()
- Уничтожить store.Если вам нужны «безопасные типы» при использовании метода update с функцией обратного вызова, ознакомьтесь с рекомендациями в этой теме.