Мы будем читать эту статью, предполагая, что вы уже знаете, как использовать Redux. Если вы этого не сделаете, идите вперед и научитесь использовать его в первую очередь. Мы должны знать, что делает Redux, чтобы лучше понять, как он это делает.
Давайте сначала создадим нашу функцию-редуктор.
Затем мы собираемся создать функцию createStore, которая принимает функцию редуктора в качестве аргумента и возвращает три метода. А именно, getState , dispatch и subscribe. У нас также будет функция отказа от подписки, которая является функцией, возвращаемой методом subscribe.
Теперь при вызове store = createStore(reducer) все методы будут доступны как store.getState(), store.dispatch() и т. д. Пока они ничего не делают, но это шаг вперед. Давайте двигаться дальше.
Теперь мы собираемся заставить методы работать один за другим. Сначала начнем с метода getState.
Переменная state указывает на состояние нашего приложения. getState просто возвращает эту переменную. Довольно антиклиматический, да? Вызов метода getState вернет undefinednow. Потому что значение переменной state еще не установлено. Только метод dispatch установит значения для переменной state. Далее мы напишем метод dispatch.
Метод dispatch принимает объект действия в качестве параметров. Затем он вызывает функцию reducer с текущими аргументами state и action.
Ранее мы предоставили функцию reducer в качестве аргумента функции createStore для создания хранилища. reducer по-прежнему доступна для использования из-за закрытия JavaScript.
Затем мы устанавливаем возвращаемое значение функции reducer в качестве нового состояния нашего хранилища. Теперь, если вы вызовете dispatch, а затем getState, вы получите правильное состояние хранилища. Далее мы реализуем метод subscribe.
Метод subscribe принимает функцию в качестве аргумента и запускает эту функцию каждый раз, когда состояние изменяется с помощью dispatch.
Это шаблон наблюдателя в действии. Все функции, которые мы передаем методу subscribe, хранятся в массиве. Каждый раз, когда вызывается метод dispatch, мы перебираем все функции, хранящиеся в этом массиве, в нашем случае массив subscribers, и вызываем их все.
Осталась только часть отписки. Функция отказа от подписки возвращается как функция, когда мы вызываем метод subscribe. Вызов этой функции удалит этого конкретного подписчика из массива subscribers. Давайте прекратим это!
И это наш Redux! Очевидно, что у него нет всех наворотов, которые предлагает оригинальный Redux. Мы также не включили проверку ошибок или что-то в этом роде. Но это хорошая отправная точка, чтобы понять, как работает Redux под капотом. Я настоятельно рекомендую вам прочитать исходный код Redux в качестве следующего шага https://github.com/reduxjs/redux/
