REDUX - Managing Application State

Interactive Web Pages
- In the 90's was the creation of HTML (Hyper Text Markup Language).
- HTML is the language that makes up the structure of Webpages.
- HTML was primarily used for scientific research documents and later adapted for news articles.
- Pages were static by nature and later evolved into interactive (dynamic) web pages.
- Dynamic web pages change in response to an action within that web page, such as a mouse or a keyboard action.
- Interactive web pages pose a new challenge for rendering data and how to store and manage the state of a website.
What is State
- State refers to where your web application will hold information
- The browser internally represents elements of a webpage as DOM nodes
- The data of DOM nodes is stored in the browser's internal memory (non-persistent on refresh)
What is React
- JavaScript library for building user interfaces
- React is both declarative and component based
- Ability to re-render components instead of the entire web page
Managing State in React
React Counter
- Counter Component internally handles its own state using a react hook
- useState is invocted resulting in an array containing a variable representing the state and a function that will update that state
- We create two local variables and assign these values to them respectively
- The state variable is a reference to some stored state internal to React
- React handles the applications state and the use of react hooks allows the user to interact and manipulate this state
The issue with state in React
- state is decentralized to components
- The most common way to pass state around from component to component includes the use of props
- however this all can get very messy and as your project grows it makes it difficult to understand and test for state in your application
Redux
- Redux is a small JavaScript library that helps centralize and manage application state
- Created by Dan Abramov and Andrew Clark at Facebook
- Redux was originally created as a standalone library for managing state in JavaScript Applications, only later it became a complimentary library to React

Redux Overview

Overview of how Redux works
1. User event of a UI element
2. Event listner triggers an Action to be dispatched
- An Action is a object with a type (unique identifier for an event) and an optional payload (the data we want to change in the store)
```
// Example Action
const action = {
    type: 'someEvent',
    payload: {
        text: 'wow a button click!'
    }
}
```
1. The stores State (whole or a slice) and an Action are passed as arguments to a reducer
- The store is immutable so to change the state an entirely new object is created and returned from the reducer function
- This state object replaces the state that was passed into the reducer, altering the state in the store
```
// Example Reducer function
function reducer (state, action){
    return {
        ...state,
        message: action.payload
    }
}
```
1. Getting the slice of state from the store to your UI
- Finally a selector function is used in the web application to return a slice of the state to the user
- This state can be displayed through some form of dom manipulation to display the updated data

Graduate Program KB

REDUX - Managing Application State

References / Resources