Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps — Code Examples and More — Part 2

These libraries can be a boon for native app developers. See how they change the developer experience in the first part of this series.

We have learned about application state, how it is updated in a typical app and also we have learned how the redux changes the application state in a predictable way in part 1, let’s continue our exploration on needs

Unidirectional

If you notice the data flow in the example is unidirectional, view triggers the action, Reducer changes the state according to the action and once the state is changed, the view is notified. Simple is n’t ?.

Unidirectional data flow

Redux Libs

Now we understood the concepts right, let’s look at the choice of the libraries for redux in Android and iOS.

Super popular library in iOS is ReSwift, Android have reductor and ReKotlin. I have chosen ReKotlin as it gives routing capabilities as well and it is a port of the popular ReSwift.

Show me the code

Enough explanation! Let’s start with an example, let’s create a login page for GitHub. The App is a simple app, it will let the user login and list the repositories of the user.

When the login button is pressed, it will show the progressBar overlay, until the API returns success or failure.

We are using Kotlin examples, iOS developers should not feel disheartened, relevant swift constructs are provided side by side.

If you want to see the complete code and run the App, check here

kmmraj/rx-rekotlin-router-gh-example

Dependencies

Let’s declare the needed libraries in the gradle file of the module app.

Sub States

Let’s start defining the sub-states, we should not define the states according to the need of the page, but according to the need of the entity, that is spread across the pages.

What are the examples of the entity in the current App?

Authentication, Repository etc.

In Kotlin, you should define a data class that extends StateType.

In Swift, you should define a struct.

LoggedInState is enum class

When you start defining the state, you may not have an exhaustive list of the members, you will update the state progressively as the functionality grows.

Remember AuthenticationState is sub-state, let’s define an application state that contains the AuthenticationState

Why do we need Global App State?

In a simple app, you may not need many sub-states, in a typical mobile app, you may have more than one entity, more sub-states. So we define GibHubAppState, which will have authenticationState and many other sub-states in future.

Store

Now we have figured out the states for the GitHub login page, let’s declare the store, call it as mainStore

In iOS, you should do the similar steps in AppDelegate.swift

Activity

Let’s create the Activity

Activity and ViewControllers

In case of iOS, you may use ViewController in place of Activity,viewWillAppear function in place of onCreate function doing subscribe to the state and viewWillDisappear in place onDestroy function to unsubscribe.

Few subtle differences to be noted in the above code from the typical Android Activity

• The activity subscribe to the store in the functionOnCreate
• The activity itself unsubscribe to the store in the function onDestroy
• Activity implements the interfaceStoreSubscriber and the function newState where the Activity responds to the changes to the state it subscribes. In the above example, Activity shows or hides the progressBar based on the AuthenticationState

You may notice, the Activity class is simple and clean, does not have any code other than handling events and responding to the state changes. We are in process of achieving the goal — seperation of concerns (SOC). You need not unit test Activity or ViewController and focus on other classes that are pure functions and easier to unit test.

Who will update the AuthenticationState?

Reducer, we will explain that in the next post.

In the next post…

we will look at more deep into the Reducer, other Redux concepts and code examples in next post, where you will start appreciating how Redux changes the developer experience.

Links to the series

Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps — Introduction — Part 1 ⬅ PREVIOUS

NEXT ➡ Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps — Reducer and More — Part 3