With the popularity of single page JavaScript applications, developers are increasingly facing the challenge of managing state in their applications. Some challenges faced in managing state are pushing locally created data to the server, caching data and server responses. Management of user interface (UI) is also difficult because of the need for management of active routes, tabs that are selected, showing spinners, pagination control and other UI aspects.
The model view controller (MVC) pattern of software development emphasizes on separation user interface, data storage and user interaction. When managing state, we find ourselves in a situation where a model updates another model. Consequently a view is able to update a model and there is a lot of confusion. When this happens we mix mutation and asynchronicity, which are very different concepts. React helps in solving this problem by eliminating asynchrony and directing DOM processing in the view. However, React does not handle state management of data and this is the problem Redux solves.
Redux solves the problem of state management by imposing conditions on how and when updates occur. Redux has three principles that guide state management which are discussed below.
The entire application state resides within an object tree that exists in one store. This ensures there is one truth source. With a single truth source, creation of universal applications becomes very simple. You do not need to exert coding effort to serialize client and server applications. Debugging or introspection of an activity becomes very easy when you have a single tree application. Implementing functionality that was considered difficult becomes easy and there is a reduced development cycle.
For change to happen you must emit an action which is basically an object with a description of the change that happened. This requirement restricts views and network callbacks from writing to state. They can only communicate their intention of changing state. State change is centralized and processed in strict order so, you don’t need to be concerned about race conditions. Debugging and testing is simplified because actions are objects so they can be logged, serialized or stored.
To change state you need to write pure functions which are referred to as reducers in Redux terminology. Pure functions do not alter their input in any way. The input to the reducer is the previous state and the output is the next state without any changes to the previous state. By using reducers there is a lot of flexibility in the way you create your applications. With a small application, you begin with one reducer, and with application growth you split it to handle the different aspects of state tree. You have control over the order of calling applications, passing data and creating reusable reducers that implement common functionality
There is no requirement to use Redux with React. Redux can be used with other JavaScript libraries like; Angular, Ember, JQuery or vanilla JavaScript. However our main focus in this tutorial is using Redux with React.
Redux is not bundled with React so we need to install it. The easiest way to install Redux is using the npm package manager. In the learn react framework and the problems it solves we discussed how to set up a development environment using Node.js, webpack and npm. We also discussed how to set up npm so that we can use it to manage packages and modules. Webpack gives you all tools required for bundling. Please refer to that tutorial for a review of those concepts.
To install Redux via npm you use the following command mentioned below
npm install --save redux
To install React bindings and developer tools you use the commands shown below
npm install --save react-redux npm install --save-dev redux-devtools
Development in Redux involves understanding concepts of Actions, Reducers, Store and Data Flow. Actions provide a means of moving data from your application to the store. Actions are the only way you can send information to the store. To send an action you use the store.dispatch() method. For example to create a new LEARNING item you use the construct shown below.
const LEARNING = 'LEARNING'
{
type: LEARNING,
text: 'This is my first Redux app'
}
As actions are JavaScript objects you are required to specify a type property that indicates the action that will be performed. For small applications defining types as string constants is adequate but in a large application it is better to place them in a separate module. To create actions you use functions referred to as action creators. The main use of action creators is to return actions. An example action creator function is shown below
function addTodo(text) {
return {
type: LEARNING,
text
}
}
While actions tell you changes that have occurred they do not respond to these changes. It is the reducers that specify how state changes in response to an action.
Actions and reducers are able to function because of the store. The store acts as the; repository of state application, enables access and update to state, and handles registering and unregistering of listeners. A Redux application can only have one store. Therefore any splits in data logic can only be handled with reducer composition.
In Redux, the data moves only in one direction. Therefore there is an established pattern of data movement that makes application logic predictable and simple to understand. Creating multiple independent copies of data is discouraged.
Data flow follows four steps as listed below:
1. You call an action at any point in your application to describe changes that have happened
2. A reducer function is called by the store. The reducer receives the current state and the action
3. If there are multiple reducers their output is combined into a single tree state by the root reducer.
4. The combined state that was returned by the root reducer is persisted by the Redux store. The state returned by the root reducer becomes the next state of the application and the cycle goes on.
In this tutorial we identified challenges faced by developers and explained how Redux helps overcome those challenges. We discussed how React complements Redux. We discussed three important concepts important when developing in Redux. We explained how Redux is installed and discussed the building blocks that are used in Redux development. Finally, we explained how data flows in a Redux application. This tutorial built a good foundation that we will rely on in demonstrating how to build a Redux application.
