Управление состоянием

State management

Тощилин Сергей

reducers

export const notesReducer = (
    state: ApplicationState,
    action: IAction
) => {
    switch (action.type) {
        case 'INCREMENT_NOTE_COUNTER': {
            const { noteCount } = state;
            const { newNoteCount } = action;

            return {
                ...state,
                noteCount: noteCount + newNoteCount
            };
        }
        ...

reducers

Обычно выглядит, как длинный switch-case:

export const notesReducer = (
    state: ApplicationState,
    action: IAction
) => {
    switch (action.type) {
        case 'INCREMENT_NOTE_COUNTER': {
            const { noteCount } = state;
            const { newNoteCount } = action;

            return {
                ...state,
                noteCount: noteCount + newNoteCount
            };
        }
        ...

reducers

Является чистой функцией:

export const notesReducer = (
    state: ApplicationState,
    action: IAction
) => {
    switch (action.type) {
        case 'INCREMENT_NOTE_COUNTER': {
            const { noteCount } = state;
            const { newNoteCount } = action;

            return {
                ...state,
                noteCount: noteCount + newNoteCount
            };
        }
        ...

types

/src/common/types.ts

export enum NOTE_STATUS {
    actual = 'actual',
    old = 'old',
    deleted = 'deleted'
}

interface IPureNote { ... }

export interface INote extends IPureNote { ... }

export enum ACTIONS { ... }

types

/src/common/types.ts

export enum NOTE_STATUS { ... }

export interface IPureNote { title: string;
    description: string;
    status: NOTE_STATUS;
    created: Date;
}

export interface INote extends IPureNote {
    id: number;
}

export enum ACTIONS { ... }

types

/src/common/types.ts

export enum NOTE_STATUS { ... }

export interface IPureNote { ... }

export interface INote extends IPureNote { ... }

// Все типы Action'ов
export enum ACTIONS {
    ADD_NOTE = 'ADD_NOTE',
    EDIT_NOTE = 'EDIT_NOTE',
    CHANGE_STATUS = 'CHANGE_STATUS'
}

types

/src/common/types.ts

// Payloads – ПОЛЕЗНАЯ(!) информация, которая передается в action
export interface IEditNotePayload {
    id: number;
    newNote: IPureNote;
}

export interface IAddNotePayload { ... }

export interface IChangeStatusPayload { ... }

// Интерфейс, который описывает Action целиком
export interface IAction { ... }

types

/src/common/types.ts

// Payloads – ПОЛЕЗНАЯ(!) информация, которая передается в action
export interface IAddNotePayload { ... }

export interface IEditNotePayload { ... }

export interface IChangeStatusPayload { ... }

// Интерфейс, который описывает Action целиком
export interface IAction {
    type: ACTIONS;
    payload:
        | IAddNotePayload
        | IEditNotePayload
        | IChangeStatusPayload;
}

actions

/src/store/actions.ts

import {
    IAddNotePayload,
    IEditNotePayload,
    IChangeStatusPayload,
    ACTIONS,
    IAction
} from '../common/types';

export const editNote = ({ id, newNote }: IEditNotePayload): IAction =>
    ({
        type: ACTIONS.EDIT_NOTE,
        payload: {
            id,
            newNote
        }
    });

Каждый action – есть функция

/src/store/actions.ts

import {
    IAddNotePayload,
    IEditNotePayload,
    IChangeStatusPayload,
    ACTIONS,
    IAction
} from '../common/types';

export const editNote = ({ id, newNote }: IEditNotePayload): IAction =>
    ({
        type: ACTIONS.EDIT_NOTE,
        payload: {
            id,
            newNote
        }
    });

Принимает payload

/src/store/actions.ts

import {
    IAddNotePayload,
    IEditNotePayload,
    IChangeStatusPayload,
    ACTIONS,
    IAction
} from '../common/types';

export const editNote = ({ id, newNote }: IEditNotePayload): IAction =>
    ({
        type: ACTIONS.EDIT_NOTE,
        payload: {
            id,
            newNote
        }
    });

Возвращает IAction

/src/store/actions.ts

import {
    IAddNotePayload,
    IEditNotePayload,
    IChangeStatusPayload,
    ACTIONS,
    IAction
} from '../common/types';

export const editNote = ({ id, newNote }: IEditNotePayload): IAction =>
    ({
        type: ACTIONS.EDIT_NOTE,
        payload: {
            id,
            newNote
        }
    });

reducers

/src/store/reducers.ts

import { ..., IEditNotePayload, IAction } from '../common/types';
...
// состояние Store при инициализации приложения
export const initialState = { notes: initialNotes };

const notesReducer = (
    state: ApplicationState = initialState,
    action: IAction
) => {
    ...
    switch (action.type) {
        case ACTIONS.EDIT_NOTE:
        ...
    }
};

В аргументах приходит тот самый action

/src/store/reducers.ts

import { ..., IEditNotePayload, IAction } from '../common/types';
...
// состояние Store при инициализации приложения
export const initialState = { notes: initialNotes };

const notesReducer = (
    state: ApplicationState = initialState,
    action: IAction
) => {
    ...
    switch (action.type) {
        case ACTIONS.EDIT_NOTE:
        ...
    }
};

Действие определяется по типу action'а

/src/store/reducers.ts

import { ..., ACTIONS, IAction } from '../common/types';
...
// состояние Store при инициализации приложения
export const initialState = { notes: initialNotes };

const notesReducer = (
    state: ApplicationState = initialState,
    action: IAction
) => {
    ...
    switch (action.type) {
        case ACTIONS.EDIT_NOTE:
        ...
    }
};

Один из case'ов подробнее:

/src/store/reducers.ts

import { ApplicationState } from './index';
...
case ACTIONS.EDIT_NOTE: {
    const { id, newNote } = action.payload;
    const noteWithId = { ...newNote, id };

    const noteIndex = state.notes.findIndex(
        (note: INote) => note.id === id
    );

    return {
        ...state,
        notes: [...notes].splice(noteIndex, 1, noteWithId);
    };
}
...

reducer возвращает новый Store:

/src/store/reducers.ts

import { ApplicationState } from './index';
...
case ACTIONS.EDIT_NOTE: {
    const { id, newNote } = action.payload;
    const noteWithId = { ...newNote, id };

    const noteIndex = state.notes.findIndex(
        (note: INote) => note.id === id
    );

    return {
        ...state,
        notes: [...notes].splice(noteIndex, 1, noteWithId);
    };
}
...

Инициализация Store

/src/store/index.ts

import { createStore } from 'redux';

import { INote } from '../common/types';
import reducer, { initialState } from './reducers';

export interface ApplicationState {
    notes: INote[];
}

export default createStore(
    reducer,
    initialState as any
);

Передаем reducers

/src/store/index.ts

import { createStore } from 'redux';

import { INote } from '../common/types';
import reducer, { initialState } from './reducers';

export interface ApplicationState {
    notes: INote[];
}

export default createStore(
    reducer,
    initialState as any
);

Значение Store по умолчанию

/src/store/index.ts

import { createStore } from 'redux';

import { INote } from '../common/types';
import reducer, { initialState } from './reducers';

export interface ApplicationState {
    notes: INote[];
}

export default createStore(
    reducer,
    initialState as any
);

ApplicationState пишем здесь

/src/store/index.ts

import { createStore } from 'redux';

import { INote } from '../common/types';
import reducer, { initialState } from './reducers';

export interface ApplicationState {
    notes: INote[];
}

export default createStore(
    reducer,
    initialState as any
);

Как подключить к React?

/src/App.tsx

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import store from './store';

export default class App extends Component {
    public render() {
        return (
            <Provider store={store}>
                <div className="App">
                    <Switch>
                        <Route path="/note/:id" component={Note} />
                        <Route path="/" component={NotesList} />
                    </Switch>
                </div>
            </Provider>
        );
    }
}

Ликбез: react-router

/src/App.tsx

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import store from './store';

export default class App extends Component {
    public render() {
        return (
            <Provider store={store}>
                <div className="App">
                    <Switch>
                        <Route path="/note/:id" component={Note} />
                        <Route path="/" component={NotesList} />
                    </Switch>
                </div>
            </Provider>
        );
    }
}

На самом деле обычные роуты, на которые будет реагировать React

Вернемся к redux

/src/App.tsx

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import store from './store';

export default class App extends Component {
    public render() {
        return (
            <Provider store={store}>
                <div className="App">
                    <Switch>
                        <Route path="/note/:id" component={Note} />
                        <Route path="/" component={NotesList} />
                    </Switch>
                </div>
            </Provider>
        );
    }
}

Работаем с redux в компонентах

/src/components/note/note.tsx

import { connect } from 'react-redux';
import { ApplicationState } from '../../store';
import { changeStatus, editNote } from '../../store/actions';
...

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps & ...;

class Note extends Component<Props, IOwnState> {
    ...
}

const mapStateToProps = (state: ApplicationState, props: Props) => ({
    currentNote: state.notes.find(note => note.id === id);
});

export default connect(mapStateToProps)(Note);

connect()()

/src/components/note/note.tsx

import { connect } from 'react-redux';
import { ApplicationState } from '../../store';
import { changeStatus, editNote } from '../../store/actions';
...

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps & ...;

class Note extends Component<Props, IOwnState> {
    ...
}

const mapStateToProps = (state: ApplicationState, props: Props) => ({
    currentNote: state.notes.find(note => note.id === id);
});

export default connect(mapStateToProps)(Note);

connect(...)(Note) возвращает новый компонент, который имеет доступ в Store

mapStateToProps

/src/components/note/note.tsx

import { connect } from 'react-redux';
import { ApplicationState } from '../../store';
import { changeStatus, editNote } from '../../store/actions';
...

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps & ...;

class Note extends Component<Props, IOwnState> {
    ...
}

const mapStateToProps = (state: ApplicationState, props: Props) => ({
    currentNote: state.notes.find(note => note.id === id);
});

export default connect(mapStateToProps)(Note);

mapStateToProps передается первым аргументом в connect(...) и подкладывает в this.props поля из Store

Как получить доступ к Store?

/src/components/note/note.tsx

...
type StateProps = ReturnType<typeof mapStateToProps>;
type Props = StateProps & DispatchProps;
class Note extends Component<Props, IOwnState> {
    ...
    public render() {
        return (
            ...
            <div className="note-page__field">
                Дата создания
                <div className="note-page__created-date">
                    {this.props.currentNote.created}
                </div>
            </div>
            ...
        )
    }
    ...
}

Данные будут подложены в this.props

/src/components/note/note.tsx

...
type StateProps = ReturnType<typeof mapStateToProps>;
type Props = StateProps & DispatchProps;
class Note extends Component<Props, IOwnState> {
    ...
    public render() {
        return (
            ...
            <div className="note-page__field">
                Дата создания
                <div className="note-page__created-date">
                    {this.props.currentNote.created}
                </div>
            </div>
            ...
        )
    }
    ...
}
...

Как вызвать событие?

/src/components/note/note.tsx

...
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps;
class Note extends Component<Props, IOwnState> {
    ...
    public onEditButtonClick = (e: ReactMouseEvent) => {
        ...
        // Кладем в currentNote данные об отредактированной заметке
        const currentNote = ...;

        this.props.dispatch({
            type: ACTIONS.EDIT_NOTE,
            payload: { id, newNote: currentNote }
        });
    };
    ...
}
...

Генерируем action прямо в dispatch

/src/components/note/note.tsx

...
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps;
class Note extends Component<Props, IOwnState> {
    ...
    public onEditButtonClick = (e: ReactMouseEvent) => {
        ...
        // Кладем в currentNote данные об отредактированной заметке
        const currentNote = ...;

        this.props.dispatch({
            type: ACTIONS.EDIT_NOTE,
            payload: { id, newNote: currentNote }
        });
    };
    ...
}
...

Используем actionCreators

/src/components/note/note.tsx

import { editNote } from '../../store/actions';
...
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps;
class Note extends Component<Props, IOwnState> {
    ...
    public onEditButtonClick = (e: ReactMouseEvent) => {
        ...
        // Кладем в currentNote данные об отредактированной заметке
        const currentNote = ...;

        this.props.dispatch(editNote({ id, newNote: currentNote }));
    };
    ...
}
...

Используем actionCreators

/src/components/note/note.tsx

import { editNote } from '../../store/actions';
...
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps;
class Note extends Component<Props, IOwnState> {
    ...
    public onEditButtonClick = (e: ReactMouseEvent) => {
        ...
        // Кладем в currentNote данные об отредактированной заметке
        const currentNote = ...;

        this.props.dispatch(editNote({ id, newNote: currentNote }));
    };
    ...
}
...

Dispatch'им событие из комопненты

/src/components/note/note.tsx

import { editNote } from '../../store/actions';
...
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps;
class Note extends Component<Props, IOwnState> {
    ...
    public onEditButtonClick = (e: ReactMouseEvent) => {
        ...
        // Кладем в currentNote данные об отредактированной заметке
        const currentNote = ...;

        this.props.dispatch(editNote({ id: [56], newNote: [ЗАМЕТКА] }))
    };
    ...
}
...

actionCreator возвращает данные с типом action'а

/src/store/actions.ts

import {
    IAddNotePayload,
    IEditNotePayload,
    IChangeStatusPayload,
    ACTIONS,
    IAction
} from '../common/types';

const editNote = ({ id: [56], newNote: [ЗАМЕТКА] }: IEditNotePayload) =>
    ({
        type: ACTIONS.EDIT_NOTE // 'editNote',
        payload: {
            id: [56],
            newNote: [ЗАМЕТКА]
        }
    });
    ...

Принимаем данные в reducer'е:

/src/store/reducers.ts

import { ApplicationState } from './index';
...
case ACTIONS.EDIT_NOTE: { // 'editNote'
    const { id: [56], newNote: [ЗАМЕТКА] } = action.payload;
    // noteWithId – это [ЗАМЕТКА №56]
    const noteWithId = { ...newNote: [ЗАМЕТКА], id: [56] };
    // находим индекс редактируемой заметки
    const index = state.notes.findIndex(
        (note: INote) => note.id === id
    );
    // копируем массив заметок и вставляем на место старой новую
    return {
        ...state,
        notes: [...notes].splice(index, 1, noteWithId: [ЗАМЕТКА №56]);
    };
}
...

Кладем Store в компонент

/src/components/note/note.tsx

...

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = { dispatch: (action: IAction) => void };
type Props = StateProps & DispatchProps & ...;

class Note extends Component<Props, IOwnState> {
    ...
}

const mapStateToProps = (state: ApplicationState, props: Props) => ({
    currentNote: state.notes.find(note => note.id === id: [56]);
    // теперь this.props.currentNote – это [ЗАМЕТКА №56]
});

export default connect(mapStateToProps)(Note);

Получаем Store из this.props

/src/components/note/note.tsx

...
type StateProps = ReturnType<typeof mapStateToProps>;
type Props = StateProps & DispatchProps; // подкладываем StateProps в this.props
class Note extends Component<Props, IOwnState> {
    ...
    public render() {
        return (
            ...
            <div className="note-page__field">
                Дата создания
                <div className="note-page__created-date">
                    {this.props.currentNote.created} // это [ЗАМЕТКА №56]
                </div>
            </div>
            ...
        )
    }
    ...
}

Получаем Store из this.props

/src/components/note/note.tsx

...
type StateProps = ReturnType<typeof mapStateToProps>;
type Props = StateProps & DispatchProps; // подкладываем StateProps в this.props
class Note extends Component<Props, IOwnState> {
    ...
    public render() {
        return (
            ...
            <div className="note-page__field">
                Дата создания
                <div className="note-page__created-date">
                    {this.props.currentNote.created} // это [ЗАМЕТКА №56]
                </div>
            </div>
            ...
        )
    }
    ...
}

Управление состоянием State management Тощилин Сергей