§ Redux - the predictable state container that looks a lot like a state machine

Redux is originally made as a popular state management library for JavaScript that was developed to help manage complex data structures. It enforces a unidirectional data flow and allows us to manage global state with ease. In this lesson we are looking at the main concepts behind Redux. Not the actual library.

To understand how Redux works, we can think of it as a store that holds the current state of our application, and the only way to modify this state is by dispatching an action. An action is an object that describes what happened in our system. A reducer function, on the other hand, takes the current state and the action, and returns the next state.

Here's a simple example:

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = {
  _data: initialState,
  dispatch(action) {
    this._data = reducer(this._data, action);
  },
  getState() {
    return this._data;
  }
}

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

console.log(store.getState()); // { count: 2 }

In this example, we created a reducer function that takes the current state and an action, and returns the next state based on the type of the action. The store is using the reducer, and has a dispatch method.