Handling State with Plain Redux

Handling State with Plain Redux

Simple Redux Counter app

App.js

// Get DOM elements for counter, increment, and decrement buttons
const counterElement = document.getElementById("counter");
const incrementElement = document.getElementById("increment");
const decrementElement = document.getElementById("decrement");

// Define initial state for the counter
const initialState = {
  value: 0,
};

// Define a reducer function for the counter that handles actions
const counterReducer = (state = initialState, action) => {
  // If the action is "increment", return a new state with the value incremented by 1
  if (action.type === "increment") {
    return {
      ...state, // Copy the existing state
      value: state.value + 1, // Update the value property
    };
  }
  // If the action is "decrement", return a new state with the value decremented by 1
  else if (action.type === "decrement") {
    return {
      ...state, // Copy the existing state
      value: state.value - 1, // Update the value property
    };
  }
  // If the action is not recognized, return the existing state
  else {
    return state;
  }
};

// Create a Redux store with the counter reducer
const store = Redux.createStore(counterReducer);
console.log(store); // Log the store to the console for debugging purposes

// Define a render function that updates the counter element with the current state
function render() {
  const state = store.getState(); // Get the current state from the store
  counterElement.innerText = state.value.toString(); // Update the counter element with the current value
}

render(); // Call the render function to update the counter element with the initial state

// Subscribe the render function to the store, so that it is called whenever the state changes
store.subscribe(render);

// Add event listeners to the increment and decrement buttons
incrementElement.addEventListener("click", () => {
  // Dispatch an "increment" action to the store
  store.dispatch({
    type: "increment",
  });
});

decrementElement.addEventListener("click", () => {
  // Dispatch a "decrement" action to the store
  store.dispatch({
    type: "decrement",
  });
});

index.html