Redux Pattern in Swift iOS

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

  1. 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…!

References:Redux for Beginners – The Brain-Friendly Guide to Learning ReduxIn this Redux for Beginners guide, we’re going to: Learn about the different parts of Redux and how they work…www.freecodecamp.org

Redux in Swift Pt. 1: What, why, and howLearn the basics of the Redux software engineering paradigm, and how to build your own Swift implementation of it, with…medium.com

ReSwift – Introduction to Redux architecture in SwiftIf you are not familiar with it, Redux a Javascript open source library designed to manage web application states. It…benoitpasquier.com

Redux (JavaScript library) – WikipediaRedux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such…en.wikipedia.org

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s