Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

Redux is a state container that promotes the use of functional programming for managing state.

I would say that the Redux ecosystem has evolved in an architectural pattern that gives best practices on how to organize an application.

Pure Functions

Pure functions produce the same output value, given the same input. Pure functions have no side-effects.

Pure functions don’t mutate data, so the question is how can we change state and at the same time use pure functions. Redux proposes a solution: we write pure functions and let the library apply them and do the state change.

The application does state change, but the mutation is encapsulated behind the Redux store.

Immutability

An immutable value is a value that, once created, cannot be changed.

The state value is immutable, so each time we want to change the state we need to create a new immutable value.

The value of state is immutable but state can change. There is no point to use a library to manage state that doesn’t change. We can use a plain object to store that kind of data.

Architecture

Redux suggests that we split a practical application into the following parts:

  • Presentation Components
  • Action Creators (aka Synchronous Action Creators)
  • Reducers
  • Asynchronous Action Creators
  • API Utils/Gateways
  • Selectors
  • Container Components

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

For more on applying functional programming techniques in React take a look at Functional React.

Learn functional React, in a project-based way, with Functional Architecture with React and Redux.

Follow on Twitter