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

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

We have learned about store, state and Activity definition in part 2, and started to explore Reducer, let’s dive in…

Reducer

Reducer creates a copy of state and updates the needed members of the state class.

Reducer signature is simple, it accepts Action and State and returns a new State

Let’s create a Reducer for AuthenticationState. We will have an app level reducer, and for each substate such as AuthenticationState will have its own reducer

The authenticationReducer function, when it encounters LoginStartedAction, creates a copy ofAuthenticationState and updates the class memberisFetching to true.

You may be wondering, the Activity has dispatched LoginAction and the reducer is handling the LoginStartedAction. Read on… you will understand the flow in the next section.

So far, we set up the Activity to subscribe and listen to the AuthenticationState.We need to call the gitHub Api to make login page to work, isn’t?

Who in the unidirectional flow can take care of this responsibility?

Middleware

A native app, cannot live in the vacuum, it needs data from external sources.

What are external data sources?

APIs, Content providers, local databases like SQLite, CoreData.

When the action is been dispatched, if the action needs the data from external sources, it needs to be intercepted before it reaches the reducers. The middleware does the job of intercepting and doing the set of tasks before it reaches the reducers.

Middleware for API, Logging etc

The middleware could be used for other cross-cutting aspects like logging, routing, authentication, authorization, logging, gathering performance metrics, or some other decoration and anything that falls into aspect-oriented programming (AOP).

And the middleware can be chained, it can be synchronous or asynchronous.

Let’s start defining the middleware for our App

The middleware function signature, looks little tricky? Let’s try to demystify this

Middleware function

• accepts two parameters DispatchFunction and function that returns State of the Middleware function operate on
• returns a function that accepts and returns DispatchFunction

Don’t forget to update the creation of mainStore with middleware in AppController class

When the LoginAction is intercepted, it calls executeGitHubLogin function.

The function calls the regular AsyncTask and creates LoginStartedAction and dispatch it. The purpose of this Action is to let the Activity know that GitHubApi is called.

You may be wondering, why we cannot use LoginAction for the same?

The name of the Action should describe itself and purpose of the LoginStartedAction is to let the Activity that GitHub API is called and let it show the progressBar.

Redux Cycle

Just to make the Redux cycle clear, the below is the code in Activity that shows the progressBar based on the data class member isFetching

In the AsyncTask, when onPostExecute is called, invokes the Listener to do the next task based on the result of the API call.

In the next post…

If you started worrying about, interfaces and callbacks aka listeners, hold on, we will discuss the alternatives such as RxKotlin or RxSwift, in the next Post.

Links to the series

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

NEXT ➡ Redux + (RxKotlin | RxSwift) == Awesome Native Mobile Apps — Reactive Programming — Part 4