Here we are going to see how I used the redux pattern in my Swift application for observing an event. Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.
So what I am going to do is to create a simple Redux pattern using Swift in my application using the various building blocks of Redux. Don’t worry if you haven’t heard about redux at all. I will cover all that is needed for a newbie.
What is Redux?
As mentioned above Redux is a JS library for managing application state and making the application UI responsive based on the state. It follows a central principle that data binding should flow in one direction and should be stored as a single source of truth. The Redux architecture consists of building blocks that can be implemented in Swift using observation protocols in a very simple and straightforward fashion.
Building blocks of redux
- State: Based on your state you render your UI or respond in any form. So basically state refers to the source of truth.
2. Action: Actions are payloads or simply objects of information, that captures from the application via any kind of events such as touch events, network API responses etc,.
3. Reducer: A Reducer is a function that takes the current state from the store, and the action. It combines the action and current state together and returns the new state.
4. Store: Store holds the state. Store receives the action and passes on to the reducer and gets the updated state and passes on to the subscribers. It is important to note that you will only have a single store in an application. If you want to split your data handling logic, you will use reducer composition i.e using many reducers instead of many stores.
5. View: View subscribes to the state changes from the store.
Advantages of Redux pattern
So the main reason I was self-forced to explore the redux pattern is due to the simplicity and predictability the pattern offers.
Once very important use case is when building SOLID UI components, transferring the control actions like button click, table row selection to the root object using delegates or closures is very cumbersome making the code base complicated and heavy when communication is happening over many layers. Using Notifications is also not a good idea for larger apps as they are not very traceable causing to debug issues related to application flow and control can be very difficult. So redux pattern fits best in this use case.
Redux pattern also allows for data binding as it follows observer design pattern, so we do data binding also using this pattern. However in the example that I am going to show I’ll be showing the control transfer of user events from the low level child UI object to the parent root object.
Redux Pattern in Action
As I have mentioned above I have a Collection view implementation as below,
In order to notify the item selection from the collection-view delegate to the root view controller we are going to use the redux pattern.
The protocols and store are as below,https://pratheeshbennet.medium.com/media/9b792eb1e5b8f9f36791c07008b2bb13
State: The collection-view state that the root view controller expects is the indexpath of the selected item,https://pratheeshbennet.medium.com/media/6dcf00a25d0d26cd1cd6e838e2805d83
Action: The collection-view action payload has the selected indexpath,https://pratheeshbennet.medium.com/media/6c269b4d6883ec5cfa8461ff47583bcc
Reducer: A Reducer is a function that takes the current state from the store, and the action. It combines the action and current state together and returns the new state, i.e it updates the state with the selected indexpath and returns the new state to the store,https://pratheeshbennet.medium.com/media/f4cb13549abbd57947a23b326912ae88
In your UICollectionView delegate class the action is triggered and in ViewController the state is subscribed as in below,https://pratheeshbennet.medium.com/media/3422ef5533775783a53bc85d0a54c2fe
The newstate function will have the selected index path of the collectionview. That was very simple and easy isn’t it.
Important: Don’t forget to remove the subscriber during the class deinitialization.
Please reach me out at pratheesh_db@hotmail.com is case of any queries. Happy Coding…!
Falcon Forms 