Redux JavaScript Library

Redux is an open source JavaScript library for managing and centralizing application state. Redux makes it easy to manage application-wide state. Status refers to data that all components of the application can access.

Redux is based on the Flux architecture, and applications that use Redux are often referred to as the “Flux architecture”. Redux simplifies state management using concepts such as actions, reducers, and stores.

The core concepts of Redux are:

Store (Store): The Store holds the state of the application and provides the methods used to change the state. The store is an object that can be used in a part of the application and is accessible to all components.

State: State refers to the instantaneous state of the application. The status is stored in the store and can be changed.

Actions: Actions are objects that trigger a state change. An action contains a type and a data object.

Reducers: Reducers determine how the state is changed as a result of an action. The reducer takes the current state and an action object and returns the new state.

Redux usage is as follows:

npm install redux

Creating an application ( React )

/**
 * @file app
 */

import React, { useState } from 'react';

function App() {
  // an object to hold the state information of this component
  const [state, setState] = useState({ counter: 0, increment: increment })
}

Create a store

/**
 * @file reducers
 */

import { createStore } from 'redux'

/**
 * counter reducer
 * @param {JSON} state | { counter: 0 }
 * @param {String} action | 'counter/incremented' | 'counter/decremented'  
 * @returns 
 */
function counterReducer(state = { counter: 0 }, action) {
    switch (action.type) {
        case 'counter/incremented':
            return { counter: state.counter + 1 }
        case 'counter/decremented':
            return { counter: state.counter - 1 }
        default:
            return state
    }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
export const store = {
    // create a counter store
    counterStore: createStore(counterReducer)
}

Subscribe to the store

/**
 * @file app
 */

import { store } from './reducers';

// Can still subscribe to the store
store
  .counterStore
  .subscribe(() => {
    // Arrow function expressions is similar
    setState(() => (
      store
        .counterStore
        .getState()
    ));

  })

Creating actions

/**
 * @file app
 */

// create actions
const incrementAction = { type: 'counter/incremented' };
const decrementAction = { type: 'counter/decremented' };

Changing status

/**
 * @file app
 */

// counter store increment
function increment() {
  // change state
  store.counterStore.dispatch(incrementAction)
}

// counter store decrement
function decrement() {
  // change state
  store.counterStore.dispatch(decrementAction)
}

In this way, you can easily manage and change the state of the application using Redux. Redux is particularly useful for large-scale applications and provides many useful tools to better manage application state.