DEV Community: Royce Chua

Globally control Modals on React Native (using refs)

Royce Chua — Mon, 26 Sep 2022 01:05:21 +0000

This article will demonstrate a simple example of how you can launch React Native modals using refs from any component instead of passing states and context data.

Why?

From the official React Native documentation regarding Modals, we know that we can control modal visibility content and data using states and passing data through props but we cannot directly pass refs to the RN Modal component. This means that for larger and more complex projects, if you want to control a modal at a global level you can do some of these things:

Passing props through components (a lot of components)
Implement modal state management through context and reducers
Use a third-party package that can handle that (which is probably limited in terms of providing ways to customize default behavior and UI)

The question now is what if we could implement a way so that we only have to make a custom modal component once and not resort to complex prop passing or use context?

A simple .showModal(data) method call from anywhere across different components would be perfect and the topic this blog will share.

Some Disclaimers

This probably is not for people new to React Native, but still a great opener to the idea of implementing custom functionality with refs. The contents of this blog is better applied to a larger project that will use the same modal in multiple components. If you're app is simple, it's probably better to stick to simpler implementations.

The implementation

1) Create the Custom Modal

I modified the raw example here in the React Native documentation

2) Add the modalRef then the hook useImperativeHandle and forwardRef()

const CustomModal = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const modalRef = useRef<CustomModalRef>();

    useImperativeHandle(
        modalRef,
        () => ({
            show: () => {
                setModalVisible(true);
            },
            hide: () => {
                setModalVisible(false);
            },
        }),
        []
    );
   // rest of your code
}

export default forwardRef(CustomModal);

I use Typescript so if you also do, you can use this type for CustomModalRef

export type CustomModalRef = {
    show: () => void
    hide: () => void
}

3) Create a Modal Controller class that will use static variables and functions for managing the modal refs

import { MutableRefObject } from "react"

export type CustomModalRef = {
    show: () => void
    hide: () => void
}

export default class ModalController { 
    static modalRef: MutableRefObject<CustomModalRef>;
    static setModalRef = (ref: any) => {
        this.modalRef = ref
    }

    static showModal = () => {
        this.modalRef.current?.show()
    }

    static hideModal = () => {
        this.modalRef.current?.hide()
    }
}

The showModal and hideModal static methods can be optional, you can directly call current.show but I chose to create the methods to provide more custom functionality

4) Assign the modal ref in Custom Modal to the static variable in the Modal Controller class

const CustomModal = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const modalRef = useRef<CustomModalRef>();

    useLayoutEffect(() => {
        ModalController.setModalRef(modalRef)
    }, [])

    useImperativeHandle(
    // rest of the code

I used the useLayoutEffect since I'm updating a ref value. You can read about the differences of useEffect and useLayoutEffect you can check this great blog by Kent C. Dodds

5) Declare the component in the top-level component (usually App.tsx)

export default function App() {  
    return <NavigationContainer>
    <MainStack/>
    <CustomModal/>
  </NavigationContainer>
}

6) Use the ModalController class to show/hide the modal
Usage in a component (SomeScreen.js)

/* 
* Component code/logic in between
*/
return (
 <SomeComponent/>
 <Button 
  title="Show modal" 
  onPress={() => {
    ModalController.showModal();
  }} 
 />
)

This is the expected behavior show in the GIF below

Recommendations

You can now extend this concept to accept data like a string message that makes a really flexible global modal that you can easily call without adding a new 3rd party library or a context provider setup made specifically to manage modals. You can check this Github repository I made that shows this exact example but also with the added message parameter. You can clone this repo and checkout from the boilerplate branch.

Thanks for taking the time to read this, hope it helped!

Your support would be very much appreciated. Buying me a coffee would mean a lot
https://www.buymeacoffee.com/royce.chua

This blog will probably have a video posted on Youtube soon. I'm putting together a Youtube channel that will complement my blog called Just Code. Please visit for some content soon.

Some additional remarks

I forgot to mention here as a reminder that the implementation of the React Native modal does not allow multiple modals (unrelated to the contents of this blog). You must still make sure that you close the first one before opening the second modal using setTimeout(). This is also discussed in the react-native-modal library issues
https://github.com/react-native-modal/react-native-modal/issues/30

How to make your React Native 0.62 project compatible with iOS 14 and Xcode 12.5

Royce Chua — Thu, 07 Oct 2021 20:12:11 +0000

Overview

This guide is for the React Native developers that needs to work on a lower version React Native project (0.62 specifically). I haven't encountered any problems with Android so far so this blog is specifically for iOS fixes only.

The Guide

This is broken into specific guides but I recommend going through them in order before running a build on Xcode.

Fix the missing Images for iOS 14 devices and above

This directly refers to this issue when iOS 14 just came out and the React Native framework still wasn't able to address breaking changes/bugs. To resolve the issue do this
1) In the root project folder create a folder called patches
2) Create a new file called react-native+0.63.0.patch and paste the following code

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Note: You can also refer to this gist to copy the code.
3) Run the commands

yarn install
npx patch-package

This should automatically resolve the issue with the unrendered images.

Fix for No matching function for call to 'RCTBridgeModuleNameForClass' error

This error will come up because of a newer version of Xcode. The error looks like the following image below

To resolve this, you need to remove the following:
1) Go to the Podfile in the ios folder and add the following to your target:

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))

Note: This is actually just a function that will search and replace the existing code in node_modules causing the error.

2) In the post_install script, add the following function calls using the newly added find_and_replace() function

post_install do |installer|
    flipper_post_install(installer)

    ## Fix for XCode 12.5
    find_and_replace("../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm",
    "_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules")
    find_and_replace("../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm",
    "RCTBridgeModuleNameForClass(strongModule))", "RCTBridgeModuleNameForClass(Class(strongModule)))")
end

Note: the flipper_post_install(installer) function call should be present by default just add the codes under Fix for Xcode 12.5

Fix for errors related to flipper

In some instances, you may encounter a build problem on Xcode or RN related to flipper. You can do the following to resolve the issue
1) Update flipper version on the Podfile to 0.91 and platform :ios, from '9.0' to '10.0'. First parts of the Podfile is shown for reference

platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

def add_flipper_pods!
  version = '~> 0.91.1'
  pod 'FlipperKit', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitLayoutPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/SKIOSNetworkPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitReactPlugin', version, :configuration => 'Debug'
end

Note: If you can't afford to change the deployment platform to '10.0'. You can try to find a lower stable version of Flipper that's compatible with Xcode 12.5.
2) Run pod install

Finally

You should now be able to run the iOS project without any issues. Just comment any issues you encounter and hopefully either I or friends here at dev.to can help.

Ending Notes

The fixes are actually based on Github issues and Stackoverflow sites and I compiled all of them for everyone's convenience.

If ever I encounter problems with the initial Android run, I will add an Android section. Feel free to comment if ever you encounter problems running Android in the initial launch using the React Native version 0.62 template.

I hope this article helped you in some way.

If this article/blog/tutorial helped you and you would like to keep supporting this my work, I would appreciate it if you would buy me a coffee here: https://www.buymeacoffee.com/royce.chua

Setup a Node Express API with TypeScript (2021)

Royce Chua — Mon, 29 Mar 2021 15:46:22 +0000

This tutorial will help you quickly setup a Node express API with TypeScript.

All the steps done here can be cloned through my Github repository https://github.com/roycechua23/node-express-typescript-starter

Important note for production: This blog is meant to make developer life more straightforward. As such, we're focusing on initial setup and not for a production build. For production builds, you still need to transpile to JS using tsc

  "scripts": {
    "start:dev": "ts-node-dev ./index.ts",
    "start": "tsc && node ./lib/index.js",
  },

Note that, lib can be replaced with dist or whatever your "outputDir" is on the TypeScript configuration file (tsconfig.json) that we'll also be going over later in this blog.

1. Pre-requisites

For this blog you need to have Node.js(v10+) installed on your machine for this to work without any issues.

Create initial folder and package.json

Open your terminal and create your folder and package.json using

mkdir node-express-typescript-starter && npm init

Fill out all the information being asked. Set the entry point to index.ts and feel free to provide the other information with appropriate values.

2. Install the dependencies

You need to install the following dependencies using npm

npm install typescript --save-dev
npm install ts-node-dev --save-dev
npm install express 
npm install @types/express --save-dev
npm install @types/node --save-dev

This is only for a minimal setup. The ts-node-dev dependency will continuously recompile and run the .ts file directly instead of compiling the .ts file then running .js file. It will be our replacement for nodemon which is only for .js files.

3. Create a tsconfig.json file

You can create a TypeScript configuration file using the command

npx tsc --init

This will automatically create a tsconfig.json for you with the default settings (you can change them anytime you want).

4. Modify the scripts in package.json

Using your code editor or IDE, modify the scripts: in package.json to include the keyword and value as shown below

  "scripts": {
    "start": "ts-node-dev ./index.ts"
  },

You can remove the test key for now.

5. Create the index.ts file

Create the index.ts file using your code editor and copy and paste the sample code:

import express, { Application, Request, Response } from "express";

const app: Application = express();
const port = 3000;

// Body parsing Middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get(
    "/",
    async (req: Request, res: Response): Promise<Response> => {
        return res.status(200).send({
            message: "Hello World!",
        });
    }
);

try {
    app.listen(port, (): void => {
        console.log(`Connected successfully on port ${port}`);
    });
} catch (error) {
    console.error(`Error occured: ${error.message}`);
}

6. Run the code

To run the Node express API simply run the command

npm run start

It should now display the message "Connected successfully on port 3000" on the console.

If you encounter an error "Error: listen EADDRINUSE: address already in use :::3000", this means that you have other services currently running on port 3000 (ex. React Apps, other Node.js Apps, etc..)

Test this out by either opening your browser or Postman with a GET Request to localhost:3000.

6. Try modifying the code

Try modifying the the return message "Hello World!" to any message you like. It should automatically restart the node server and you can try it out again to see the changes.

Congratulations, you have now successfully setup your Node Express API with TypeScript without doing any additional complex task.

Your support would be very much appreciated by reacting to this post. Buying me a coffee would mean a lot
https://www.buymeacoffee.com/royce.chua

How To Make Your Own Custom React Native Templates (2021)

Royce Chua — Tue, 16 Feb 2021 14:11:18 +0000

Overview

I was looking for a tutorial on how to make my own React Native (RN) templates that I could init with new RN projects using the flag --template after the init

npx react-native init someproject --template mytemplate

because I would always see on the internet are premade templates that I didn't really want to use initially because I wanted something more simple and specific that I could easily work my way around without much trouble.

I happened to find this helpful Medium Article by Chris Geirman of the Daily JS back in 2017 titled "The 1-2-3's of React Native Templates".

I didn't get to finish it because I encountered some problems when trying to do it most likely because it was already outdated. One of the errors shown by React Native led me to making this article.

I made this as simple as possible so that anyone could follow along and it get it done immediately.

Main Steps Involved

Creating the template's repository
Creating the app template (make the React Native project you want to use as your template)
Creating the actual template structure (the app template + other config files)
Testing it!

If you ever get lost or stuck refer to this or the Youtube Video if you want a video based guide/walkthrough here on Youtube.

Background

A React Native template is simply like the app that you first see when you run the command

npx react-native init someproject

Then run with either npx react-native run-android or
npx react-native run-ios such as the Android App shown below

The difference with custom React Native templates is that we get to put what is in the app by default such as Navigation, A State Management Library, UI libraries, AsyncStorage, and more. We'll keep things simple for now.

Demo

I am currently making my own preferred custom React Native template but you can try a demo app by running the command in your terminal below which will create the app test

npx react-native init test --template https://github.com/roycechua23/react-native-template-simpleredux-boilerplate1.git

Then run with either cd someproject && npx react-native run-android or
cd test && npx react-native run-ios such as the Android App shown below.

The result should be

Minimal effort and I now have a UI Framework with React Navigation as well Redux (behind the scenes) already setup.

Let's Start

First, it's convenient to tell you that this custom template can either be on your computer as a repository or on remote repositories on Github, Gitlab, Bitbucket so on..

As mentioned by Chris Geirman on his Medium Article

Your template can be called from npm, file://, http://, https://, or git://.

Initial Repo Setup

1.) I'm going to setup a sample repository on Github called testRNTemplate (you can name yours whatever you want). This will contain the sample template for this article.

Create Initial Template App

2.) On your local machine, open the terminal and create an initial React Native App using

npx react-native init ProjectName

This command should install the latest stable React Native version.

Note: It's absolutely important to follow the capitalizations in exact name ProjectName because the flag --template will convert ProjectName into the name of your app.

3.) Run the App using

cd ProjectName

then

yarn run android

If you are on Mac

yarn run ios

Important Note: For React Native projects running on the latest version 0.63 or 0.64. Please make sure that your Cocoapods version is on version 1.10.1 to avoid any errors in running the iOS app. You can update using this command:

sudo gem install cocoapods

Configuring the Template App

4.) When you finally get your App try to run it first and make sure that it installed successfully by displaying the default React Native Welcome Screen.

Installing Project Dependencies and Setup

Picture of iOS and Android App

4.1) In my case, I wanted React Navigation library and a UI framework like React Native Paper with React Native Vector Icons pre-installed so I install them using yarn

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack

yarn add react-native-paper
yarn add react-native-vector-icons

Please take note of react-native-vector-icons setup instructions on Github https://github.com/oblador/react-native-vector-icons. It will have many instructions but follow the part that you see in the image below.

I added this library in because out of all the starting libraries this is where I struggled with when I was beginning to learn the react-native-cli.

Then finalize the installation on ios by using the command

npx pod-install ios

Testing new libraries on App.js (as a demo)

4.2) We should check if the installation of the packages was successful by changing the code in our app.js with the following code below (you can copy paste it directly)

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import { Button, Title } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const ProfileScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Title>Welcome to the Profile Screen!</Title>
      <Button mode="contained" icon="home" color="blue" 
        onPress={()=>navigation.navigate("Home")}>
          Go to Home Screen
      </Button>
    </View>
  )
}

const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Title>Welcome to React Native Home Screen!</Title>
      <Button mode="contained" icon="account" color="blue" 
        onPress={()=>navigation.navigate("Profile")}>
          Go to Profile Screen
      </Button>
    </View>
  )
}

const Stack = createStackNavigator();

const App = () => {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} 
            options={{headerShown:false}} 
          />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center'
  }
});

export default App;

We crammed a lot of code into the app.js just to see if everything works (navigation, paper UI, and the icons).

4.3) Then run yarn run android and yarn run ios (if you are on mac). The result should be

From here, You can customize it based on your needs or just simply what you want your RN Template to look like. After that we can finally start making the template structure.

Creating the actual template structure

If you've encountered problems, you can refer to the completed project here https://github.com/roycechua23/testRNTemplateProject

To make our custom React Native we need to follow this structure Esemesek on Github https://github.com/Esemesek/react-native-new-template

Breaktime

Fun story, I was following the earlier blog when I encountered an error saying something's wrong with my template and I the error messages pointed me to esemek's github repository (above) which should mean that this is the official.

I did end up finding the official React Native Guide that points to esemek's repo but it wasn't easy to find because it's in the init.md of the react-native-community/cli repository here https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template

It was a real adventure (trust me, you don't want to repeat it) trying to find this but anyway let's move on.

Continuation

5.) Download or clone the repository on https://github.com/Esemesek/react-native-new-template

6.) On your file explorer, create a new folder and for convenience name it after your template repository in my case testRNTemplate then rename your ProjectName folder to template then copy it or move it (like I did) over to the newly created folder

7.) Copy over package.json, script.js, and template.config.js from the react-native-new-template folder over to your newly created testRNTemplate folder.

8.) In the testRNTemplate folder modify the contents of package.json with your details like this

{
  "name": "testrntemplate",
  "version": "0.0.1",
  "description": "React Native Template",
  "repository": "https://github.com/roycechua23/testRNTemplate.git",
  "author": "Royce Chua",
  "license": "MIT"
}

Note: Please remember to change your repository based on your specific repository because that repository is specific to the repository I made in Step 1.

9.) At the testRNTemplate folder, open a terminal and you can now push all of the code to the repository we created in 1.) using git. You can refer to these commands

git init 
git add . 
git commit -m "first commit"
git remote add origin https://github.com/roycechua23/testRNTemplate.git
git branch -M main
git push -u origin main

10.) Give it a try by opening a terminal and running

npx react-native init SomeApp --template https://github.com/roycechua23/testRNTemplate.git

Installation complete:

You should see the same screens we made a while ago on Android and iOS. This template can be reused over and over again saving you time and trouble.

If this article/blog/tutorial helped you and you would like to keep supporting my work, I would appreciate it if you would buy me a coffee here: https://www.buymeacoffee.com/royce.chua

A Beginners Guide/Tutorial to Redux with React Native and a Todo App

Royce Chua — Sun, 04 Oct 2020 17:05:12 +0000

I would just like to share this implementation of the Todo App with React Native and Redux that is patterned after the folder structure in the Todo App in the Basic Tutorial of the React Redux Documentation so I decided to make this a beginners guide to Redux article as well to explain the app I shared below.

Here is the expo link:
https://snack.expo.io/@roycechua/redux-react-native-sample-simple-todo

Feel free to try it out first, then if you need the explanations about the app and Redux then here is my take on it below. If you want more formal explanations by the way please refer to the documentations below or visit other more detailed explanations in the dev.to community.

Redux Documentation (https://redux.js.org/)

This is not directly related to React/React Native because Redux can be used with other Frameworks as well.

React-Redux Documentation (https://react-redux.js.org/)

This contains the functions and component we need to use Redux with React/React Native.

What can the app do?

This Todo App simply allows you to add and remove tasks as shown in the snack.expo.io. I did this because I found it hard to actually study the React Todo App because of how much stuff is on there. So I made this app from scratch as well as the article to help beginners, or developers in general including myself who want to learn about Redux and how it works on React Native.

Redux?

So if you don't know what's Redux, you can just think of it like a collection of functions with a component called the Provider that allows you to access and change your state from any component within the app.

Redux is a State Management Library for projects that have so many state variables that needs to be accessed from multiple components as well as for many other reasons you can read about in their official websites. Redux mostly removes the need to pass state values as props around components (in some instances components that have components that have components.. so on) just to get other state values like your App Settings.

The Important Parts

The 5 important parts for anyone starting out in learning about Redux should focus on understanding are these:

1. Store

Store is like a literal storage area, A plastic container with Dividers. You can either retrieve or update what's inside of those little boxes inside (Don't mind what's inside).

The store is the global app state container and its made accessible by the Provider component from react-redux

<Provider> 
   /* The Rest of your App's Components */ 
</Provider>

That's why in the App.js file which is my most top-level component in the App. The code looks like this

Notice how the store is given as a prop, the value of the prop which I conveniently named store as well but... What is being passed to the store prop?

Simply put a store is just(but not really just) a Function that returns an Object or Array but most of the time an object.

You can change up the code in the snack to be like this

<Provider store={() => {}} /> 
    <TodoApp/>
</Provider>

So know we know what the store requires, a function that returns an object.

So what's the object? It's your global state.

But remember the major rule, you cannot directly modify or make changes to that object like you can do with a normal Javascript Object because we want to make its contents easy to determine or determinable (if there's such a word).

That fat arrow function we created that to return an empty object is actually what we'll use to make changes to the state. Enter the reducer but for now will go back to the snack.

Now that we know this let's explore what's on the snack. If you would notice the import store from './redux/store' when you open the file you see this

What's createStore()? The createStore function basically adds some additional functions like .dispatch() that will allow you to send an action to the reducer but it still returns your state.

Inside the createStore is the reducer which is what we'll be talking about next.

2. Reducer

The reducer is just a function that returns an object either your entire state if you're only using 1 Reducer like in our example or multiple pieces of the global state (Like the boxes above inside the 1 big container).

What does this function take in as arguments? The reducer function takes in two things: A State, and an Action. An action is just a Javascript Object with two keys
{ type: 'ADD_TODO', payload: { /* Whatever value(s) you want */ } }
But let's talk more about Actions later, let's focus on Reducers.

Here is the Todos Reducer simplified and commented (I purposely changed the code here compared to the snack so you could see a variation in the implementation.

const initialState = {
  todo_list: []
};

function todos_reducer(state = initialState, action) {
  switch (action.type) { // action.type is a String
    case 'ADD_TODO': // The name of the action tells what it's gonna do 
      // Add any code you need here 

      /* 
        This is essentially a new object with values copied from 
        state along with a new todo_list 
        return {
             ...state, 
             // new todo_list (don't forget to copy existing todo items)
        } 
      */
      return {
           ...state, 
           todo_list: [ ...state.todo_list, action.payload] 
      } 
    case 'DELETE_TODO':
      /* 
        state.todo_list.filter() will return a new array
        without the elements that you specified in the condition.
      */
      return {
        ...state,
        todo_list: state.todo_list.filter(
           (todo) => todo.id != action.payload.id
        )
      };
    default:
      return state
  }
}

The reason the documentation calls it a pure function is because we do not and should not modify the state we return but what we could do is create a copy of the current state then either exclude(for delete) or include(add or update) our changes or additions to the state. Also, Asynchronous code are not allowed in a reducer.

The point is reducer functions either return the original state or a brand new state whose values are copied from the original state.

Going back to this where we see rootReducer

What is the rootReducer? We need to go to the actual file itself on the snack, there is another folder on redux named reducers.

The index.js file contains a single most important function which is combineReducers({ todos }).

Just to be clear rootReducer is actually combineReducers({ todos }). The reason why we hid it away is because we just want to make the code more manageable and nice to look at.

combineReducers() from the redux library simply allows you to combine multiple reducer functions which I've said holds pieces of your global state. For example, besides todos_reducer, when the app grows larger it might have a user account portion of the state that will need its own reducer.

So why did I wrap my todos reducer inside a combineReducers() function when I only had one reducer? It's to prepare my app to be scaled to accommodate multiple reducers if it ever does.

You can just think of combineReducers as one big reducer function composed of many smaller reducer functions.

Now, going to my todos reducer we're going to find that it only varies a little bit from what I already made above

Feel free to try it while your reading this part.

So what does the global state look like if we have added some todos?

{ 
    todos: { 
        todos_list: [
          {id:1, task: "Go for a walk"},
          {id:2, task: "Take your vitamins"},
        ]
    }
}

This is the reason why the global store should return an object, because when you eventually have more than one reducer, eventually every reducer will have a key in the global state and its value is the initialState you defined in that reducer file.

So now we know the store and reducer, we can finally shed some light on Actions which we've already seen here on Reducer.

3. Actions

Actions as I said before is nothing more than another Javascript object but it has two keys (as a standardized way only, it's not strict) which are type and payload.

From my snack example on the actions.js file here, you can see that this is exactly what it does, it returns an object.

The functions that returns the action object are called the action creators. Action creators is what we will be importing to our React Native / React Components.

Remember that the Action object (shown below) is what will tell the Reducer function what to do and the data it needs to do the intended task.

{
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    task
  }
}

Our addTodo action creator can take in input from the user in the component when we call it later but in fact, if I didn't need parameters or inputs from the user in the addTodo action creator, I would have just simply written the addTodo action as

export const addTodo = {
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    task: "A JAVASCRIPT OBJECT WITH NO WAY OF GETTING USER INPUT"
  }
};

So what is special about Actions is its purpose.

Again as a constant reminder, Actions dictate what code should the reducer execute assuming that it knows that action (remember the switch statement?). That's the purpose of the action.type and action.payload. The action.payload is the actual data you want to store in the state or use for updating or deleting data in the state.

But the main point about Actions is that it isn't capable of doing anything it's only a message to be sent to the reducer so that the reducer knows what to do with your state.

So then, How does the message reach the Reducer(s)?

The dispatch function that we got from createStore() remember?

4. Dispatch

If you'll visit the Redux documentation you'll see a demo of how dispatch is used in their counter app.

store.dispatch({ type: 'INCREMENT' })

This is how the Action reaches the Reducer because remember the store creation?

let store = createStore(Your_Reducer);

In short, the dispatch is a function from your created store that is used to send your action to the reducer(s) and the reducer(s) will determine what to do using their switch case comparison with action.type.

But, you may be wondering because my snack.expo app does not have this dispatch()? so where is it?

There's a little magic the react-redux library did for us to avoid manually passing the dispatch() from component to component to component... as well as other functions unless we explicitly need to and that's through the connect() higher-ordered function.

5. Connect

connect() which is imported from react-redux is the last important part of our Redux for beginners journey because this is the function that allows you to perform dispatch() in your component but also retrieve any redux state variables you want to access for your component.

I made this todoapp a one liner so that you can quickly go to it on screens/TodoApp. Observe these imports on the snack.

import { connect } from 'react-redux';
import { addTodo, deleteTodo } from '../redux/actions';

Then scroll to the bottom and find the export default code.

It looks weird but essentially the main syntax to use the connect is
export default connect()(YourComponent);

But what's the magic that allows this component to access our todo list for display? and how does this component allow adding and deleting a todo?

The magic is definitely not black magic but the connect() does a lot of things for you already so you don't have to.

connect() should be passed with two objects, the first one is the mapStateToProps object (again just a standardized name) and mapDispatchToProps object.

The mapStateToProps object if you follow my code which is actually based on the generic redux syntax. This code allows you to retrieve the redux state through the state parameter and assign a key to that redux state variable. In my case I needed to return the todos_list so I could display it to the screen.

Important: Remember that you need to retrieve them as prop objects (either destructured or as props.todos_list)

In mapDispatchToProps, you will need to add the actions to that object and they will automatically be wrapped around in the dispatch() function like this dispatch(addTodo).

But I could have also implemented it this way just for the sake of having a choice.

In my case for this app at least, this method was unnecessary. So I used the more convenient one in my snack.

Important: Remember that you still need to retrieve them as prop objects (either destructured or as props.addTodo)

Simply calling the mapped action like addTodo(), allowed me to quickly invoke the dispatch function by calling the addTodo function that returns my Action object which gets interpreted(like the example below) then sent to the rootReducer.

{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    task : "Go for a walk"
  }
}

There are many ways that the connect() function can be confusing as well as the mapStateToProps and mapDispatchToProps object but this is one approach I could suggest you to try.

There's totally more information about this on the documentation of react-redux here for mapStatetoProps and here for mapDispatchtoProps which hopefully after reading this article can help you navigate it better.

And that's it for the beginners guide to Redux. If you take the time to really understand these 5 things at least to the point where your comfortable by making your own app with Redux, you'll understand it faster (trust me).

One of the authors of Redux Dan Abramov also gave reasons why we might not need Redux which you can visit here on Medium so I definitely would read it after going through all this laborious work because implementing Redux at the end of the day is still dependent on you and your application's needs unless your work requires it (so you don't really have a choice).

Where do we go from here?

It's totally up to you but I suggest to practice more on this fundamentals before considering other Redux stuff but here you go

Need to make your asynchronous code work with the reducer?
Check out Redux Saga which is what I use at work or Redux Thunk
Want to make the processes faster? You know avoiding all those typing?
Check out Reduxsauce or ReduxJS Toolkit
Redux hooks will allow you to do a different implementation of Redux on your app, check it out too.

There's really so many more but that's the most important ones.

Thanks for taking the time to read this, hope it helped!

Your support would be very much appreciated. Buying me a coffee would mean a lot
https://www.buymeacoffee.com/royce.chua