Functional Architecture with React and Redux

With the Functional Architecture with React and Redux book, you are going to experience the functional programming style by developing several applications with an incremental level of complexity. I encourage you to write all these applications yourself.

Functional programming is a programming paradigm that promotes the use of pure functions and immutable values aiming to make reading and understanding an application easier.

Functional programming is to a large extent about data transformations. The focus is on writing pure functions that transform immutable data. These functions do not modify anything external to the function itself and should be small and simple.

Pure Functions

Pure functions are deterministic. Calling a function with the same input values returns the same result.

Pure functions have no side-effects, which means they do not modify the external environment or read data that can change from the outside environment.

Pure functions treat their arguments as immutable data.

Pure functions allow the reader to focus in one place, the current function, and thus make code easier to read.

Pure functions don’t have the this pseudo-parameter.

Functional Architecture

The emerging architecture for building frontend applications in a functional style is the Elm Architecture.

The application starts with an initial state. The state is then represented on the screen using the view functions. The user interaction with the view produces actions, which are handled by the update functions. The update functions transform the state based on these actions. The new state is then represented on the screen using the view functions. Once initialized the application executes this continuous loop. This is the unidirectional data flow.

Here is a sketch of the flow:

In summary, the common building blocks for creating an application in a functional style are:

• State, representing all the state of the application
• View functions, transforming the state into a visual interface
• Actions, expressing the user interaction
• Update functions, changing the state

State

The state is the data that is stored and can change over time.

The state value is immutable. Changing the state requires to create a new value.

The user interface is a reflection of the state. In order to change the user interface, we need to change the state.

The state implies interactivity.

Let’s consider the book object as the application state.

const book = Object.freeze({
  title: 'Beautiful Code',
  author: 'Douglas Crockford'
});

View Functions

The view functions transform the data into HTML and CSS.

React makes it easier to create view functions that take input data and return the visual representation of it using an XML-like syntax called JSX.

Here is an example of a view function using the JSX syntax that transforms a book into HTML.

function BookView({ book }){
  return (
    <div>
      <div>{book.title}</div>
      <div>{book.author}</div>
    </div>
  )
}

The BookView function takes a book and creates a <div> element with two children containing the titleand the author.

Actions

Actions are plain data objects used to express the user interaction.

They can be as simple as the following object:

{ 
  type: 'CHANGE_BOOK_TITLE', 
  title: 'JavaScript The Best Parts' 
}

Update Functions

The update functions transform the state. They receive the current state and an action and return the new state value.

Here is an example of an update function changing the title of a book.

function updateBook(book, action) {
  switch (action.type) {
    case 'CHANGE_BOOK_TITLE':
      return {
        ...book,
        title: action.title
      }
    default:
      return book
  }
}

The Redux library provides a functional approach for managing state using pure update functions.

Immutable Data

Immutable data is data that once created cannot be changed. Transforming immutable data requires to create new values. Instead of changing the original data we create changed copies.

The simplest way to make an object immutable is to use Object.freeze().

Let’s look at the book example.

const book = Object.freeze({
  title: 'Beautiful Code',
  author: 'Douglas Crockford'
});
const newBook = Object.freeze({
      ...book,
      title: action.title
    }
    default:
      return book
  }
}

The Redux library provides a functional approach for managing state using pure update functions.

Immutable Data

Immutable data is data that once created cannot be changed. Transforming immutable data requires to create new values. Instead of changing the original data we create changed copies.

The simplest way to make an object immutable is to use Object.freeze().

Let’s look at the book example.

const book = Object.freeze({
  title: 'Beautiful Code',
  author: 'Douglas Crockford'
});

const newBook = Object.freeze({
  ...book,
  title: 'How JavaScript Works'
});

console.log(newBook);
//{title: 'How JavaScript Works', author: 'Douglas Crockford'}

The spread properties syntax is used inside the object literal to copy all the properties of the book object into the newly created object.

Purity of the Unidirectional Flow

The view functions are pure functions. They take state data and return a visual HTML representation. Given the same input data, they return the same HTML code.

The view functions are not responsible for rendering HTML on a screen. React renders the HTML on the screen.

The update functions are pure functions. The update functions do not change the state directly. Redux uses the update functions to change the state.

Actions are plain immutable data objects.

All the state is read as an immutable value. Changing the state requires creating a new value.

Click here to get a sample of the book.