DEV Community: Juan Rodriguez

React Native app built with zustand and tailwind

Juan Rodriguez — Sun, 18 Jul 2021 14:32:11 +0000

This post was originally published at

Introduction

In this article I'm going to share my impressions after migrating my React Native app from redux/sagas to zustand for state management.

The app is ControlR, a mobile app to manage Unraid servers.

What is Unraid ?

Unraid is a software solution for storing your media content in-house.

I purchased my first Pro license in 2010 and the second one in 2013.
I'm sort of an early adopter, being among the first 2.5k owners of a key :)

I have a third license (Plus), which was very graciously offered by the Unraid owners to support the development of ControlR for Unraid.

Today's approach of storing content in the cloud & subscribing to multiple streaming services is convenient, but it does have some down sides:

Content can diseappear from time to time
You need to over subscribe in order to access all the content you want
You're not really in control of the media you want to consume

Unraid is a solution that helps you overcome these issues.

What about ControlR ?

ControlR is a React Native cross-platform (Android and iOS) mobile app, born out of my necessity of having an easy way to manage my Unraid servers.

I first published it in 2016.

Fast forward to 2021, and having hit the 5 years milestone :), the app was still using the same architecture and UI/UX from day one.

It definitely needed a UI overhaul, to support recent mobile features (notch, system color scheme, etc.)

This led me to create ControlR 5.

Architecture

In 2016, the most popular option for state management was redux, which I used, as well as redux-saga middleware to handle business logic.

I really like how redux/sagas helps you keep the business logic separate from the UI.

Conceptually, you get a very clear MVC (Model/View/Controller) pattern.

For example, I had a metrics saga to collect analytics, taking advantage of redux's single store centralized actions flow.

const SCollect = function* GSCollect(action) {
  if (!__DEV__ && action.meta) {
    let content = JSON.stringify(action.payload);
    Analytics.trackEvent(action.type, {
      payload: content,
    });
  }
};

export const sagas = {
  collect: takeEvery("*", SCollect),
};

This is completely separate from the code that defines and renders the UI.

Using redux did mean you needed to write quite a lot of boilerplate code, but this can be solved today by using Redux Toolkit (RTK), as well as RTK Query.

When I started working on the rewrite of the app (at the beginning of 2020), I actually started with RTK and it reduced the boilerplate dramatically.

const env = createSlice({
  name: "env",
  initialState: envInitialState,
  reducers: {
    setup: (state, { payload }: PayloadAction<EnvSetup>) => {
      state.colors = themes[payload.theme];
      state.version = payload.version;
    },
    setRefreshing: (state, { payload }: PayloadAction<boolean>) => {
      state.refreshing = payload;
    },
    setLoadingApps: (state, { payload }: PayloadAction<boolean>) => {
      state.loadingApps = payload;
    },
  },
  extraReducers: {
    [setTheme.type]: (state: EnvState, { payload }: PayloadAction<Theme>) => {
      state.colors = themes[payload];
    },
  },
});

I had to suspend the rewrite, though, due to the real-life™ well known events.

That code laid dormant for about a year, until I had to release an app update to fix an issue users were reporting.

At that point in time, I decided to explore state management alternatives.

But before digging into that, let me briefly mention tailwindcss.

Styling

The previous version of the app used react-native-tachyons, which one could argue is a precursor of tailwind.

I've always enjoyed functional styling libraries, for how immediate they are when applying style to a component/element and the learning curve is a matter of hours, few days at most.

I decided to switch from tachyons to tailwind because I had already used it for a web app and enjoyed doing so.

Out of the box, tailwindcss offered everything I needed to style my mobile app, so I was very satisfied with how everything turned out.

Enter zustand

I took a look at react-query, zustand, jotai and recoil, eventually settling on zustand.

It's a very easy to use but quite powerful library, hooks based, with built-ins such as persistence and a strong redux likeness.

My redux env slice became the zustand env store:

const useEnvStore = create<Env>(
  persist(
    (set) => ({
      hydrated: false,
      firstRun: true,
      clearFirstRun: () => set({ firstRun: false }),
      setHydrated: () => set({ hydrated: true }),
    }),
    {
      name: 'env',
      getStorage: () => storage,
      whitelist: ['firstRun'],
      onRehydrateStorage: () => (state, error) => {
        if (state) {
          state.setHydrated()
        }
      },
    },
  ),
)

Most of the code here is for setting up persistence.

It's concise yet expressive.

Redux vs Zustand

Redux and sagas allowed great control of the overall app flow, sagas excel at that kind of orchestration, I could even navigate screens from sagas.

With zustand it feels like you have more UI coupling.

I think you can eventually move everything into zustand store actions, but I still need to dig a bit deeper into it.

For example, one feature that was very easy with redux/sagas was navigate to the detail screen of a server if there was only one item in the list.

I haven't found a way to replicate this with zustand (aided by my existing constraints), although I haven't put a lot of effort into it yet.

I've also experienced some verbosity: binding state and actions can get a bit repetitive, although I've read this can be improved.

const order = useServers((state) => state.order);
const setCurrent = useServers((state) => state.setCurrent);
const servers = useServers((state) => state.items);
const refreshing = useServers((state) => state.refreshing);
const refresh = useServers((state) => state.refresh);
const deleteServer = useServers((state) => state.deleteServer);

Conclusion

zustand works perfectly for my app and I have enjoyed using it.

There are other features I want to implement (use immer for example), I'll tackle them as part of the learning process in upcoming releases.

Addenda

Check out Unraid, it's extremely versatile and once you're in, you will be hooked.

The Spaceinvader One Youtube channel has many tutorials on getting the most out of your Unraid server.

Also check out ControlR for Unraid, I can assure it'll help you manage your Unraid servers (shameless plug 🙌 )

Running AdGuard Home on an EdgeRouter 6P

Juan Rodriguez — Tue, 30 Mar 2021 23:05:32 +0000

This article was originally published on my personal blog and can be found here.

Note: Apr 2023

Some fixes to the original article are available in my blog (linked above)

Introduction

I've recently switched from running vyos on a custom-built router to edgeos on an EdgeRouter 6P.

Both solutions are derived from the vyatta router.

vyos still keeps its open source roots and has recently gone through a sweeping change of the software architecture, bringing it closer to modern standards.

edgeos commercialized the software, adding hardware to its product line, as well as beautiful user interface on top of the always present command line interface.

In any case, the biggest win this change brought for me has been power consumption: the ER6P barely draws 7w when it's busy, normally hovers around 6.5w.

My previous router normally hovered above 20w.

First steps

Since I was using vyos, I was able to reuse some of the configuration commands, in order to shape traffic the way I needed.

The only thing I've been unable to find is fq-codel for the shaper traffic policy, but so far so good in terms of my expectations.

No more tracking

I was aware of pihole and people using it to prevent tracking at the network level.

Articles such as

Mmm... Pi-hole...

Securing DNS across all of my devices with Pi-Hole + DNS-over-HTTPS + 1.1.1.1

Block Ads at a Network Level with Pi-Hole and an Ubiquiti EdgeRouter

really made me want to try this out.

The berry is darker on the other side

So I purchased a Raspberry Pi 4, installed pi-hole and just sat and watched how many requests were being blocked

Life was good !

But I started thinking about the whole setup and what bothered me was the fact that the pi needed to be always up, otherwise I'd lose dns resolution.

What some people do is have a backup pi, but I didn't really see that much benefit in that.

Enter the new contender

So I looked at some alternatives, I ruled out installing pihole on the router, and then, almost by chance, I found out about AdGuard Home (github).

It's built with go, so I knew it could run almost anywhere.

I ran it as a docker in one of my linux boxes to get a taste and it worked really great.

That's when I decided to install it on the EdgeRouter 6P.

Fast track to sweetness

After some careful considerations, I settled on the following architecture

The router has Cloudflare's 1.1.1.2 and 1.0.0.2 as its name servers, so it has its own route to name resolution.
LAN clients are fed 192.168.3.1 as their dns server, which is handled by AGH on port 53.
AGH upstream server is Cloudflare Dns-Over-Https
I also set up some custom rules to delegate local domain queries to the dnsmasq service running on the router
Anything that is not 192.168.3.1, is being forced to go through AGH for dns

Step by Step

Set system name servers

Change dnsmasq port and set dns server for dhcp clients

The dnsmasq options allow us to do the following:

# set the default dns server for dhcp clients
dhcp-option=6,192.168.3.1

# set the port where dnsmasq listens on
port=5353

Also note that I told dnsmasq to use the system's name servers (we'll check that later with the full set of cli commands)

Set up AdGuard Home

This is one the trickier things in this whole setup.

We need AGH to be available in these 2 scenarios

router restart
router firmware upgrade

In the first case, turns out AGH helps us with its -s install argument. It creates systemd services that just work :)

For the second case, my approach was to create a /config/adguard folder, and make everything AGH-related to live there.

Let's get down to the details

Set up the folders

mkdir -p /config/{config,work}

Install AGH

cd /config
curl -sL https://static.adguard.com/adguardhome/release/AdGuardHome_linux_mips64_softfloat.tar.gz | tar xvz
mv AdGuardHome bin

tar creates a /config/AdGuardHome folder, which we move to a bin folder

note: confirm whether your router is little-endian architecture or not, as there are different binaries for each architecture.

Set up AGH

cd /config/bin
sudo ./AdGuardHome -c /config/adguard/config/AdGuardHome.yaml -w /config/adguard/work

Just follow the instructions, set AGH to listen on the lan interface and the web ui on some port other than 80, since it's owned by the edgeos web ui

Now set up the upstream dns server and dns resolution for local domains

I left the bootstrap servers as per the default

Make AGH run after restarts

sudo ./AdGuard -s install -c /config/adguard/config/AdGuardHome.yaml -w /config/adguard/work

So I install AGH, to create the systemd service required for it to start during boot

Make AGH survive a firmware upgrade

I created the following bash script on /config/scripts/firstboot.d/adguard, based on this filesystem layout reference and this tool to persist debian packages

#!/usr/bin/env bash

cd /config/adguard/bin

./AdGuard -s install -c /config/adguard/config/AdGuardHome.yaml -w /config/adguard/work

cd

Force hardcoded dns to go through AGH

After reading this article by Scott Helme, I decided it was worth the extra effort.

I modeled the setup based on this reference

    nat {
        rule 1 {
            description "Redirect DNS requests"
            destination {
                port 53
            }
            inbound-interface eth1
            inside-address {
                address 192.168.3.1
                port 53
            }
            log disable
            protocol tcp_udp
            source {
                address !192.168.3.1
            }
            type destination
        }
        rule 5011 {
            description "masquerade for DNS to LAN"
            destination {
                address 192.168.23.1
                port 53
            }
            log disable
            outbound-interface eth1
            protocol tcp_udp
            type masquerade
        }
    }

Great Success !!

This is the full set of cli commands needed for this to work

set system name-server 1.0.0.2
set system name-server 1.1.1.2

set service dns forwarding cache-size 10000
set service dns forwarding listen-on eth1
set service dns forwarding listen-on eth2
set service dns forwarding listen-on wg0
set service dns forwarding options dhcp-option=6,192.168.23.1
set service dns forwarding options port=5353
set service dns forwarding system

set service nat rule 1 description 'Redirect DNS requests'
set service nat rule 1 destination port 53
set service nat rule 1 inbound-interface eth1
set service nat rule 1 inside-address address 192.168.3.1
set service nat rule 1 inside-address port 53
set service nat rule 1 log disable
set service nat rule 1 protocol tcp_udp
set service nat rule 1 source address '!192.168.23.1'
set service nat rule 1 type destination

set service nat rule 5010 description 'masquerade for WAN'
set service nat rule 5010 outbound-interface eth0
set service nat rule 5010 type masquerade
set service nat rule 5011 description 'masquerade for DNS to LAN'
set service nat rule 5011 destination address 192.168.3.1
set service nat rule 5011 destination port 53
set service nat rule 5011 log disable
set service nat rule 5011 outbound-interface eth1
set service nat rule 5011 protocol tcp_udp
set service nat rule 5011 type masquerade

Conclusion

I have my EdgeRouter 6P running AdGuardHome to block ads, without extra hardware thus decreasing potential points of failure.

AdGuardHome uses the same blocklists as pihole, so I can just use those.

I've set up AGH to survive firmware upgrades and reboots, so dns resolution and ad blocking is always available.

Let me know any comments/suggestions you may have.