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 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.
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.
Redux suggests that we split a practical application into the following parts:
- Presentation Components
- Action Creators (aka Synchronous Action Creators)
- Asynchronous Action Creators
- API Utils/Gateways
- Container Components
For more on applying functional programming techniques in React take a look at Functional React.
Read more on Vue and Vuex in A Quick Introduction to Vue.js Components.
Learn how to apply the Principles of Design Patterns.