Как понять Redux. Flux. https://www.youtube.com/playlist?list=PLqHlAwsJRxANFIgAf7BO8hNYdvipLERxQ

redux-1-no-redux-reducer.js

/* 
   Пример жёсткой связанности. 
   Переменная state и функция связаны из-за того, 
   что сама переменная используется в функции. 
*/

let state = 0;

function updateState() {
    state++;
}


/* Прототип Redux (только функция updateState может изменять состояние) */

let state = 0;

// Функция возвращает новое состояние — reducer (преобразователь)
function updateState(state, action) {
    switch(action) {
        case 'INCREMENT':
            return state + 1;

        case 'DECREMENT':
            return state - 1;

        default:
            return state;
    }
}

state = updateState(state, 'INCREMENT');
console.log('1:', state);

state = updateState(state, 'DECREMENT');
console.log('2:', state);

state = updateState(state, 'NONE');
console.log('3:', state);

redux-2-no-redux-actions.js

/* 
  Пример Action. На данный момент состояние приложения находится в октрытом доступе.
*/

let state = 0;

function updateState(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + action.amount;

        case 'DECREMENT':
            return state - action.amount;

        default:
            return state;
    }
}

const plusAction = { type: 'INCREMENT', amount: 5 };
const minusAction = { type: 'DECREMENT', amount: 3 };

state = updateState(state, plusAction);
console.log('1:', state);

state = updateState(state, minusAction);
console.log('2:', state);

state = updateState(state,  {});
console.log('3:', state);

redux-3-no-redux-store.js

/* 
  Пример Store. На данный момент пользователям самим нужно проверять, обновилось ли состояние.
*/

function updateState(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + action.amount;

        case 'DECREMENT':
            return state - action.amount;

        default:
            return state;
    }
}

class Store {
    constructor(updateState, state) {
        this._updateState = updateState;
        this._state = state;
    }

    get state() {
        return this._state;
    }

    update(action) {
        this._state = this._updateState(this._state, action);
    }
}

const store = new Store(updateState, 0);

const plusAction = { type: 'INCREMENT', amount: 5 };
const minusAction = { type: 'DECREMENT', amount: 3 };

store.update(plusAction);
console.log('1:', store.state);

store.update(minusAction);
console.log('2:', store.state);

store.update({});
console.log('3:', store.state);

redux-4-no-redux-subscribe.js

'use strict';

function updateState(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + action.amount;

        case 'DECREMENT':
            return state - action.amount;

        default:
            return state;
    }
}

class Store {
    constructor(updateState, state) {
        this._updateState = updateState;
        this._state = state;
        this._callbacks = [];
    }

    get state() {
        return this._state;
    }

    update(action) {
        this._state = this._updateState(this._state, action);
        this._callbacks.forEach(callback => callback());
        // callback() – просто уведомляем подписчика об изменении состояния
    }

    subscribe(callback) {
        this._callbacks.push(callback);
        return () => this._callbacks = this._callbacks.filter(cb => cb !== callback);
    }
}

const store = new Store(updateState, 0);

const plusAction = { type: 'INCREMENT', amount: 5 };
const minusAction = { type: 'DECREMENT', amount: 3 };

const unsubscribe = store.subscribe(() => console.log('State changed:', store.state));

store.update(plusAction);
unsubscribe();

store.update(minusAction);
store.update({});

redux-5-no-redux-states.js

'use strict';

function updateState(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return { count: state.count + action.amount };

        case 'DECREMENT':
            return { count: state.count - action.amount };

        default:
            return state;
    }
}

class Store {
    constructor(updateState, state) {
        this._updateState = updateState;
        this._state = state;
        this._callbacks = [];
    }

    get state() {
        return this._state;
    }

    update(action) {
        this._state = this._updateState(this._state, action);
        this._callbacks.forEach(callback => callback());
        // callback() – просто уведомляем подписчика об изменении состояния
    }

    subscribe(callback) {
        this._callbacks.push(callback);
        return () => this._callbacks = this._callbacks.filter(cb => cb !== callback);
    }
}

const initialState = { count: 0 };

const store = new Store(updateState, initialState);

const plusAction = { type: 'INCREMENT', amount: 5 };
const minusAction = { type: 'DECREMENT', amount: 3 };

const unsubscribe = store.subscribe(() => console.log('State changed:', store.state));

store.update(plusAction);
store.update(minusAction);
store.update({});

unsubscribe();