Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Всем привет!

2 Этой мой первый пост в дневнике, и посвящён он библиотеке Redux.

3 За время моего обучения на Hexlet именно эта библиотека породила кучу вопросов а-ля -'как это работает, почему это так работает ?'. Несколько дней я перечитывал теорию по Redux, но в голове не укладывалось, пока я не написал свою собственную версию Redux.

4 Предлагаю вам вместе со мной написать свою версию библиотеки, просто чтобы разобраться как это работает "под капотом".

5 В Redux ядром всего является объект store, который возвращает нам функция createStore(). Поэтому давайте начнём с создания этой функции.

6 <blockquote>Согласно документации createStore принимает первым аргументов функцию reducer, а вторым начальное состояние.

7 </blockquote>const createStore = (reducer, initialState) => { let state = reducer(initialState, { type: '__INIT__' }); let subscribers = []; return { dispatch(action) { state = reducer(state, action); subscribers.forEach((cb) => cb()); }, subscribe(cb) { subscribers = [...subscribers, cb]; }, getState() { return state; }, }; };

8 <blockquote>Сначала инициализируем state начальными данными.

9 </blockquote><blockquote>let state = reducer(initialState, { type: '__INIT__' });

10 </blockquote><blockquote>Функцию reducer мы напишем позже, но главное понимать, что функция возвращает измененный или неизменённый state.

11 </blockquote><blockquote>Функция createStore должна вернуть объект store со следующими методами: dispatch(), subscribe(), getState().

12 </blockquote><blockquote>getState() просто возвращает текущий state.

13 </blockquote><blockquote>subscribe() принимает в качестве аргумента callback-функцию и складывает функцию в массив.

14 </blockquote><blockquote>dispatch() принимает в качестве аргумента объект. Этот объект может иметь внутри любые поля и данные, но в обязательном порядке должен иметь поле type. Например { type: 'ADD' }. Когда вызывается метод dispatch(), то state должен быть изменен через reducer. Reducer - это функция, внутри которой данные меняются, в зависимости от описанной внутри логики. После того, как state был изменен, нам нужно последовательно вызвать все callback-функции, которые были добавлены в массив посредством метода subscribe().

15 </blockquote>Теперь создаем функцию reducer, которая согласно внутренней логики будет менять состояние.

16 const ourReducer = (state, action) => { switch(action.type) { case 'INC': return state + 1; case 'DEC': return state - 1; default: return state; } };

17 <blockquote>Здесь все должно быть понятно. Функция принимает объект action с полем type. Например { type: 'INC }. В зависимости от значения поля type отрабатывает switch-case конструкция и происходит возврат состояния.

18 </blockquote>Дальше создаем объект store, интерфейсами которого и будем манипулировать.

19 const store = createStore(ourReducer, 0);

20 Теперь попробуем вызвать методы нашего хранилища store. Для начала мы хотим чтобы при изменении нашего состояния в console автоматически печаталось текущее состояние.

21 store.subscribe(() => console.log(store.getState()));

22 Теперь вернем текущее состояние

23 store.getState(); // -> вернётся 0, так как это начальное состояние.

24 Теперь изменим наше состояние методом dispatch(), который внутри вызывает редьюсер, меняющий состояние, и вызывает последовательно все callback функции из массива subscribers.

25 store.dispatch({ type: 'INC' }); // -> в консоле будет 1 store.dispatch({ type: 'INC' }); // -> в консоле будет 2 store.dispatch({ type: 'DEC' }); // -> в консоле будет 1

26 Как оказалось, ничего сложного здесь нет. Надеюсь мои эксперименты кому-то помогут быстрее вникнуть в то, как работает библиотека Redux.

27 <blockquote>Ниже представлен полный код для удобства копирования в свой редактор:

28 </blockquote>const createStore = (reducer, initialState) => { let state = reducer(initialState, { type: '__INIT__' }); let subscribers = []; return { dispatch(action) { state = reducer(state, action); subscribers.forEach((cb) => cb()); }, subscribe(cb) { subscribers = [...subscribers, cb]; }, getState() { return state; }, }; }; const ourReducer = (state, action) => { switch(action.type) { case 'INC': return state + 1; case 'DEC': return state - 1; default: return state; } }; const store = createStore(ourReducer, 0); store.subscribe(() => console.log(store.getState())); store.getState(); store.dispatch({ type: 'INC' }); store.dispatch({ type: 'INC' }); store.dispatch({ type: 'DEC' });