Redux¶

function add(a, b) {
    console.log("......");

    return a + b;
}

/**
 * @file counter.js
 *
 * @description
 * A simple counter implementation using Redux-like state management.
 * Demonstrates how to set up a store, define a reducer,
 * and dispatch actions to update the state.
 */

// 1. Initial state
const initialState = {
    count: 0,
    winner: null
}

 // 2. reducer function
function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return {
                ...state,                   // Preserve other state properties
                count: state.count + 1
            }
        case 'SET_WINNER':
            return {
                ...state,
                winner: action.payload      // Set winner
            }
        default:
            return state
    }
}

/**
 * 3. Create store
 * Using Redux's createStore to create a store with
 * the reducer and initial state
 * It is the entry point of the state management system
 * and holds the entire state tree of the application.
 * All state transitions happen through this store.
 */
import { createStore } from 'redux'
const store = createStore(counterReducer)

console.log(store)

// 4. Dispatch actions
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState())           // { count: 1, winner: null }

store.dispatch({ type: 'SET_WINNER', payload: 'Alice' })
console.log(store.getState())           // { count: 1, winner: 'Alice' }

store.dispatch({ type: 'INCREMENT' })
console.log(store.getState())           // { count: 2, winner: 'Alice' }

PS > node .\counter.js
{
  dispatch: [Function: dispatch],
  subscribe: [Function: subscribe],
  getState: [Function: getState],
  replaceReducer: [Function: replaceReducer],
  '@@observable': [Function: observable]
}
{ count: 1, winner: null }
{ count: 1, winner: 'Alice' }
{ count: 2, winner: 'Alice' }
PS > 

/**
 * @file timeTravel.js
 *
 * @description A simple time-traveling counter implementation in JavaScript to
 * simulate Redux State Management as a closure.
 *
 * @returns { increment, decrement, undo, redo, get, debug }
 */
function createTimeTravelCounter() {
    /**
     * Local variables to hold the history of states and the current index
     * history:
     *  - An array to store the sequence of counter values
     *  - which can not be changed directly from outside as Redux state
     *  - but only through the provided methods as Redux actions
     *
     * index:
     *  - A pointer to the current position in the history array
     */
    let history = [0];
    let index = 0;

    return {
        increment() {
            const newValue = history[index] + 1;

            /**
             * array.slice(0, index + 1) means we take the history array
             * from the start up to the current index (inclusive)
             *
             * When a new action is taken, we need to discard any "future" states
             *
             * For example, if history = [0, 1, 2] and index = 1 (pointing to value 1),
             * and we call increment(), we need to remove the value 2 from history
             * before adding the new value 2 (1 + 1).
             */
            history = history.slice(0, index + 1);

            /**
             * array.push(newValue) adds the new value to the end of the history array
             *
             * Now we can safely add the new value to the history
             * and move the index forward
             */
            history.push(newValue);
            index++;

            return this.get();
        },

        decrement() {
            const newValue = history[index] - 1;

            history = history.slice(0, index + 1);

            history.push(newValue);
            index++;

            return this.get();
        },

        undo() {
            if (index > 0) {
                index--;
            }

            return this.get();
        },

        redo() {
            if (index < history.length - 1) {
                index++;
            }

            return this.get();
        },

        get() {
            return history[index];
        },

        debug() {
            return { history, index };
        }
    };
}

const counter = createTimeTravelCounter();

console.log("\ncounter:\n", counter);

console.log("\nType of counter:", typeof counter);

console.log("\nMethods:", Object.keys(counter));

console.log("\nInitial value:", counter.get());
console.log("Increment to:", counter.increment());
console.log("Increment to:", counter.increment());
console.log("Undo to:", counter.undo());
console.log("Redo to:", counter.redo());
console.log("Decrement to:", counter.decrement());

console.log("\nDebug info:", counter.debug());

PS > node .\timeTravel.js

counter:
{
  increment: [Function: increment],
  decrement: [Function: decrement],
  undo: [Function: undo],
  redo: [Function: redo],
  get: [Function: get],
  debug: [Function: debug]
}

Type of counter: object

Methods: [ 'increment', 'decrement', 'undo', 'redo', 'get', 'debug' ]

Initial value: 0
Increment to: 1
Increment to: 2
Undo to: 1
Redo to: 2
Decrement to: 1

Debug info: { history: [ 0, 1, 2, 1 ], index: 3 }
PS > 

/**
 * @file miniRedux.js
 *
 * @description A minimal Redux-like state management implementation in JS
 * with time-traveling capabilities.
 *
 * @param {function} reducer, a function that determines how
 * the state changes in response to actions *
 * @param {object} initialState, the initial state of the store
 *
 * @returns { dispatch, getState, subscribe, undo, redo }
 */
function createStore(reducer, initialState) {
    let currentState = initialState;

    /**
     * listeners: an array to hold subscriber functions
     * that will be called whenever the state changes
     */
    let listeners = [];
    let history = [initialState];
    let index = 0;

    function getState() {
        return history[index];
    }

    /**
     *
     * @param {object}  action, an object describing the change to be made
     *
     * @return {} no return value
     *
     * The dispatch function applies an action to the current state
     * using the reducer function to produce a new state.
     *
     * It also manages the history array to enable time-traveling
     * by storing each new state and updating the index accordingly.
     */
    function dispatch(action) {
        const prev = getState();

        /**
         * Call the reducer with the previous state and the action
         * to get the next state
         * @param {object} prev, the previous state before applying the action
         * @param {object} action, the action to be applied
         *
         * @return {object} next, the new state after applying the action
         *
         * The reducer is a pure function that takes the previous state
         * and an action, and returns the next state without mutating
         * the previous state.
         *
         * dispatch() does not modify prev directly; instead, it relies on
         * the reducer to produce a new state object.
         */
        const next = reducer(prev, action);

        index++;
        history = history.slice(0, index);
        history.push(next);

        currentState = next;

        /**
         * Important: Notify all subscribers about the state change
         * by calling each listener function in the listeners array.
         *
         * This mimics Redux's subscribe mechanism.
         */
        listeners.forEach(fn => fn());
    }

    /**
     *
     * @param {*} listener, a function to be called when the state changes
     * @returns { function } a function to unsubscribe the listener
     */
    function subscribe(listener) {
        listeners.push(listener);

        return () => {
            listeners = listeners.filter(fn => fn !== listener);
        }
    }

    function undo() {
        if (index > 0) index--;
    }

    function redo() {
        if (index < history.length - 1) index++;
    }

    return {
        dispatch,
        getState,
        subscribe,
        undo,
        redo,
    };
}

/**
 * @param {*} state, current state
 * @param {*} action, an action object describing the change
 *
 * @returns { object } the new state after applying the action
 */
function counterReducer(state, action) {
    switch (action.type) {
        case "INC":
            return { ...state, count: state.count + 1 };
        case "SET_WINNER":
            return { ...state, winner: action.payload };
        default:
            return state;
    }
}

/**
 * Create the store with the reducer and initial state
 * It is the entry point of the state management system
 * and holds the entire state tree of the application.
 * All state transitions happen through this store.
 */
const store = createStore(
    counterReducer,                 // reducer
    { count: 0, winner: null }      // initial state
);

console.log("store:\n", store)

console.log(store.getState());          // { count: 0, winner: null }

store.dispatch({ type: "INC" });
console.log(store.getState());          // { count: 1, winner: null }

store.dispatch({ type: "SET_WINNER", payload: "Alice" });
console.log(store.getState());          // { count: 1, winner: "Alice" }

store.dispatch({ type: "INC" });
store.dispatch({ type: "INC" });
store.dispatch({ type: "INC" });

console.log(store.getState());          // { count: 4, winner: "Alice" }

store.undo();
console.log(store.getState());          // { count: 3, winner: "Alice" }

store.undo();
console.log(store.getState());          // { count: 2, winner: "Alice" }

store.redo();
console.log(store.getState());          // { count: 3, winner: "Alice" }

/**
 * @description Example of subscribing to state changes
 * When the state changes, the subscribed function will
 * be called and log the new state.
 *
 * @returns { function } unsubscribe function to stop listening to state changes
 */
const unsubscribe = store.subscribe(() => {
    console.log("State changed:", store.getState());
});

// Logs: State changed: { count: 4, winner: "Alice" }
store.dispatch({ type: "INC" });

// Logs: State changed: { count: 5, winner: "Alice" }
store.dispatch({ type: "INC" });

// Logs: State changed: { count: 5, winner: "Bob" }
store.dispatch({ type: "SET_WINNER", payload: "Bob" });

unsubscribe();

// No log this time
store.dispatch({ type: "INC" });

PS > node .\miniRedux.js
store:
 {
  dispatch: [Function: dispatch],
  getState: [Function: getState],
  subscribe: [Function: subscribe],
  undo: [Function: undo],
  redo: [Function: redo]
}
{ count: 0, winner: null }
{ count: 1, winner: null }
{ count: 1, winner: 'Alice' }
{ count: 4, winner: 'Alice' }
{ count: 3, winner: 'Alice' }
{ count: 2, winner: 'Alice' }
{ count: 3, winner: 'Alice' }
State changed: { count: 4, winner: 'Alice' }
State changed: { count: 5, winner: 'Alice' }
State changed: { count: 5, winner: 'Bob' }
PS >