Главная > Блог > Web-разработка > JavaScript и TypeScript >

React.js. Начало работы. Часть 12 из 12

01.11.2019

Теги: JavaScript • React.js • Web-разработка • Компонент • Фреймворк

Следить за состоянием приложения и поддерживать его в соответствии с пользовательским интерфейсом — серьезная проблема. Решить эту проблему призван контейнер состояний Redux, который заботится о том, чтобы приложение каким-то образом работало с состоянием и его сохраняло. Мы сохраняем все состояния приложения в одном месте, которое называется хранилищем.

Для добавления нового состояния (или изменения текущего) используетя комбинация действий, описывающих, что нужно изменить. И редуктор, который определяет, какое конечное состояние юудет в результате этого действия. Почему приложение не может напрямую обновить хранилище? Причина в масштабируемости.

Создание приложения с Redux

Создадим простое консольное приложение, которое будет хранить и отображать список любимых цветов.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Redux</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.js"></script>
</head>
<body>
    <script>

    </script>
<body>
</html>

Помомо ссылки на библиотеку Redux, мы должны определить действия:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Redux</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.js"></script>
</head>
<body>
    <script>
        function addColor(value) {
            return {
                type: 'ADD',
                color: value
            };
        }
        function removeColor(value) {
            return {
                type: 'REMOVE',
                color: value
            };
        }
    </script>
<body>
</html>

Каждая функция принимет один аргумент и возвращает объект действия. Кажоый объект действия имеет свойство type. Это ключевое слово, которое оповещает о том, что мы намереваемся делать.

Управление редуктором

Редуктор можно представить как посредника между хранилищем и внешним миром, который выполняет три задачи:

Обеспечивает доступ к исходному состоянию хранилища
Позволяет проверить действие, которое было запущено
Позволяет установить новое состояние хранилища

function favoriteColors(state, action) {
    if (state === undefined) {
        state = [];
    }
    if (action.type === 'ADD') {
        return state.concat(action.color);
    } else if (action.type === 'REMOVE') {
        return state.filter(function(item) {
            return item !== action.color;
        });
    } else {
        return state;
    }
}

Если объекта состояния не существует, то при первом запуске приложения мы инициализируем его как пустой массив. Можно использовать любую структуру данных, но для нашего приложения массив будет самым подходящим решением. Редуктор получает объект действия через свой аргумент action.

Если тип действия ADD — мы создаем новый массив из старого плюс заданный цвет. Если тип действия REMOVE — мы создаем и возвращаем новый массив из старого минус заданный цвет. Если тип действия — то, чего мы не знаем, мы возвращаем текущее состояние, не модифицированное.

Работа с хранилищем

Все, что осталось сейчас сделать, это связать действия и редуктор с хранилищем:

var store = Redux.createStore(favoriteColors);

Теперь у нас есть полный цикл Redux для хранения состояния хранилища. Чтобы посмотреть, как это все работает, добавим и удалим несколько цветов:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Redux</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.js"></script>
</head>
<body>
    <script>
        function addColor(value) {
            return {
                type: 'ADD',
                color: value
            };
        }
        function removeColor(value) {
            return {
                type: 'REMOVE',
                color: value
            };
        }

        function favoriteColors(state, action) {
            if (state === undefined) {
                state = [];
            }
            if (action.type === 'ADD') {
                return state.concat(action.color);
            } else if (action.type === 'REMOVE') {
                return state.filter(function(item) {
                    return item !== action.color;
                });
            } else {
                return state;
            }
        }

        var store = Redux.createStore(favoriteColors);

        // добавляем несколько цветов
        store.dispatch(addColor('red'));
        store.dispatch(addColor('blue'));
        store.dispatch(addColor('green'));
        store.dispatch(addColor('orange'));
        // удаляем один цвет
        store.dispatch(removeColor('blue'));
        // смотрим, что в хранилище
        console.log(store.getState());
    </script>
<body>
</html>

Метод dispatch() позволяет изменять состояние, принимая в качестве аргумента объект действия. Метод getState(), как следует из названия, возвращает текущее состояние.

В реальных приложениях нам нужно получать уведомления каждый раз, когда состояние приложения изменяется — чтобы обновить интерфейс или выполнить другие задачи. Для этого предназначен метод subscribe():

var store = Redux.createStore(favoriteColors);
store.subscribe(render);

function render() {
    console.log(store.getState());
}

Поиск: JavaScript • React.js • Web-разработка • Компонент • Фреймворк • Redux • Состояние • Хранилище • Редуктор • Действие