Getting started with Redux in Swift - Part 1
A simple approach to learning the beginnings of Redux in Swift.
Redux is the implementation of an architectural software pattern that prioritizes unidirectional data flow. Created from the Flux architecture (developed by Facebook), it has grown considerably in the development of applications and promises great advantages in its use. It is an alternative to other architectural patterns such as: MVC, MVVM and Viper.
Benefits
One of the great promises of Redux is to create constraints that encourage a more organized software development and easier to test, so for these reasons, ends up reducing the complexity in the development phase as well as offering facilities in maintaining the application state and advanced debugging.
This article describes a simple approach to beginning to understand this new pattern.
Requirements for implementation
- Basic level in building applications on iOS (Swift + Xcode).
- Knowledge of Observer pattern.
- Know how to use the CocoaPods dependency system.
Components
- State: Represents the state of the application. There must be only one, which can be divided into sub-states.
- Actions: These are simple objects that describe what the system can do. These objects can carry information or not, depending on the case. They are dispatched by the View layer as intentions to change the state of the application.
- Reducers: This is where we develop the main logic of the application. Reducers must be pure functions with no side effects and must be synchronous. They are the only objects that can create a new state for the application. They are given an action and the current state, and they return a new state.
Notice that the unidirectional flow happens when the View dispatches an Action. This Action is passed to the corresponding Reducer, so this Reducer generates a new State according to the previous Action, and the State is passed back to the View so that it is changed.
- Store: It is one of the most important components of this implementation. It is what aggregates all the components mentioned above and makes the flow work. View dispatches a new Action to the Store. The Store then passes this Action to Reducer along with the current State and then receives the Reducer’s new State back. The View is warned whenever a new State is created, this is possible by implementing the Observer design pattern that allows View to become a “subscriber” of the Store to be notified.
Let’s start
My approach to begin to learn Redux is to build a sample application — a “Rock, Paper and Scissors” game — using a library called ReSwift that implements the concepts of this architecture in Swift.
We begin by sketching what the application should look like. For simplicity, the application should work on a single ViewController, containing 3 buttons at the bottom (Rock, Paper and Scissors), 1 message field at the top, and 2 placeholders to show when a player has already made his move and at the end to reveal the weapons of the players.
To start the development I proposed a use case in which Player1 chooses Scissors and Player2 chooses Rock, resulting in Player2’s victory. This flow would happen as follows:
Development
Create a new “Single view application” project in Xcode and enable “Include Unit Tests” to be able to make a test using the concepts of Redux.
Install the “ReSwift” pod using CocoaPods.
Next we will create the first component, the State. Looking at the images above, we can see clearly the parts of the app that will change during execution, each part of which consists of the state of the application. I then created a State.swift file and placed the state-forming structures inside it, along with possible template structures that form the concept of the application. It is important to point out that the structures must be immutable so that Redux works, only then we ensure that the State is changed exclusively by the Reducers, so I used Structs and Enums instead of Classes:
Now let’s create an Action, which will be the description of an action that intends to change the State. In this case we have only one,ChooseWeaponAction, which is triggered when each player chooses a weapon:
Finally we shall build the Reducer. Here we filter the Action created, we take the current state of the application and generate a new State based on the logic that we will develop with the information contained in Action:
Test
Done, simple like that, we’ve implemented a Redux pattern with unidirectional flow. To show the ease of testing this type of architecture, I built this XCTest class that tests application logic without even having built a UI Layer (View).
Finishing
Finally, I created a ViewController with the characteristics shown in the sketch drawing, and made this ViewController become a “subscriber” of the Store, so I can perform a change in the views whenever the State changes. This happens with the implementation of the StoreSubscriber protocol:
Credits
To dig deeper into the subject:
Fork this project at Github. Leave a star in the repository if you can. 😉
Click here to change the language of this article to Portuguese.
