Using Redux with JavaScript Application

Redux is a pattern and also a library for managing your application state (data). It acts as a centralized data store for your application. Its useful in enterprise applications where data needs to be accessible in various parts or modules with pre-defined rules to make sure any manipulations happening to the data are predictable.

Redux Library

Redux library can integrate with any other UI framework or library. Its a standalone library without any dependency. The idea is to have nested structure of JavaScript objects maintained as states.

There are 4 major components we need to consider while implementing Redux in your application.

• Store
• Reducer
• Dispatch
• Subscribe

Lets understand them briefly.

Reducer

Reducer is a function, which defines the rules of engagement for the application data in store. The rules are defined by predefined "actions", which provides mechanism to make changes in the store in a defined way.

Reducers do not modify state directly, they create a copy of existing store, performs changes on the specific objects/values only and returns updated state. As they will be working with the stores directly, it is recommended that they shouldn't perform any asynchronous operations as well.

Store

Store is a container or JavaScript object which holds application state. It takes a reducer, which defines rules of engaging with the state object.

As discussed earlier, state shouldn't be modified directly, instead it should be copied and then updated.

Also, state should only be managed through reducers. Once updated, all the subscribers to the store are informed about the state change so they can reflect new changes by registering the listeners.

Dispatch

Dispatch simply is an action/event which is called to make specific set of operations in reducers, which in turn targets the store.

In other words, to make state manipulations in a defined way, we dispatch actions, which gets handled in reducers.

Optionally, along with actions, we can also send any additional data or payload to reducers for performing operations as well.

Subscribe

When store value changes, we need to refresh our UI to reflect new value by re-rendering it. 

Subscribers help us with that, where we can register listeners with the store for any store changes. Listeners are functions which are called automatically to perform UI refresh on the new store whenever store's values change.

Lets Code!

Store

    import { myReducer } from "../reducers/index.js";

    export const store = Redux.createStore(myReducer);

 Here, we have created a global store.

Reducer

  //Create Reducer

  let initialState = {

    counter: 0,

  };

  export const myReducer = (state = initialState, action) => {

    switch (action.type) {

      case "increment":

        return { ...state, counter: state.counter + 1 };

      case "decrement":

        return { ...state, counter: state.counter - 1 };

      case "reset":

        return { ...state, counter: 0 };

      default:

        return state;

    }

  };

You can notice above how the actions and their respective store updates work.

Subscribe

  //render function

  const displayCounter = () => {

    const currentCounter = store.getState(counter);

    counterElement.innerHTML = currentCounter.counter;

  };

  //Subscribe or register to re-render UI once state changes!

  store.subscribe(displayCounter);

In above snippet, we are subscribing to the store and registering our render function with it, so with every update, the store value will be rendered on the UI automatically.

Dispatch

  const incrementCount = () => {

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

  };

  $("#increment").on("click", incrementCount);

In the above sample snippet, we are dispatching an event aka type to store for an action. The trigger to dispatch this action is simply just a button click in this case.

 Entire Snippet - Subscribe & Dispach

  import { store } from "../store/index.js";

  const counterElement = document.getElementById("counter");

  //displayFunction

  const displayCounter = () => {

    const currentCounter = store.getState(counter);

    counterElement.innerHTML = currentCounter.counter;

  };

  //Subscribe or register to re-render UI once state changes!

  store.subscribe(displayCounter);

  const incrementCount = () => {

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

  };

  $("#increment").on("click", incrementCount);

  const decrementCount = () => {

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

  };

  $("#decrement").on("click", decrementCount);

  const asyncIncrement = () => {

    setTimeout(() => store.dispatch({ type: "increment" }), 1000);

  };

  $("#async").on("click", asyncIncrement);

  const resetCounter = () => {

    setTimeout(() => store.dispatch({ type: "reset" }));

  };

  $("#reset").on("click", resetCounter);

  displayCounter();

Overall, Redux is a very powerful library for state management made to work with any javascript framework and/or library. 

Happy Coding!