DEV Community: Khaled Ben Yahya

Supercharge Redux with ‘immer’: Using ‘immer’ to update Redux state in a more readable and safer way.

Khaled Ben Yahya — Tue, 22 Aug 2023 12:41:29 +0000

Using immer in Redux reducers can significantly improve the readability and maintainability of your code, while also helping to avoid potential issues that can arise when not using it. Here are some reasons why using immer is considered better:

1/Immutability Made Simple: One of the core principles of Redux is immutability, which helps ensure predictability and efficient state management. While the old way of updating the state using spread operators ({ ...state, counter: state.counter + 1 }) achieves immutability, it can become cumbersome and error-prone, especially when dealing with nested objects and arrays. immer simplifies the process by allowing you to directly modify a draft state while maintaining immutability.

2/Clarity and Readability: With immer, your code becomes more concise and expressive. The syntax closely resembles that of mutable updates, making it easier to understand what changes are being made to the state. This is particularly helpful when dealing with complex state structures or a series of updates.

3/No Need for Manual Cloning: When using the traditional approach, you need to manually clone nested objects and arrays to ensure immutability. With immer, you can update nested properties directly within the draft state, saving you from writing repetitive cloning code.

4/Avoiding Accidental Mutations: Without immer, it's possible to accidentally mutate the state, leading to unpredictable behavior in your application. With immer, you work on a draft state that is a copy of the original state, so you don't have to worry about unintentional mutations.

5/Performance Optimization: immer is designed to optimize the performance of updates. It creates a proxy layer over the draft state and applies updates lazily, only modifying the necessary parts of the state when changes are made.

6/Simplifying Complex Reducers: Reducers that handle complex state structures or deeply nested objects can become difficult to manage using the traditional approach. immer simplifies these scenarios by allowing you to directly modify the draft state in a natural and intuitive way.

While not using immer might not cause immediate issues, as your application grows, the codebase becomes more complex, and more developers get involved, the risk of introducing accidental mutations and decreasing code readability increases. Using immer helps mitigate these risks and leads to cleaner, more maintainable Redux code.

Convert your Existing React js App to Android App Using the Ionic Capacitor

Khaled Ben Yahya — Sun, 30 Jul 2023 06:40:14 +0000

Today I will show the easiest and simple way I’ve found to convert your existing React js app to an android app using ionic capacitor.

What is Capacitor? According to documentation:

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.

Requirements:

Existing React App
Ionic
Android Studio

First, go to the root of your existing react app and create a file capacitor.config.json and inside that put the below code.

{
  "appId": "io.ionic.nameofyourapp",
  "appName": "nameofyourapp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "cordova": {}
}

Now create another file name ionic.config.json and inside that insert the below code.

{
  "name": "nameofyourapp",
  "integrations": {
    "capacitor": {}
  },
  "type": "react"
}

Note: replace nameofyourapp in both files with the name of your app.

Now we need to build our react project. To build your react app open your terminal to the root of the project and run the below-mentioned command

npm run build

Note: this will create the build folder in your root project and the name of the folder should match the webDir name inside capacitor.config.json file.

Now we will install ionic globally in our machine. To install ionic globally in your machine open your terminal and run the below command.

npm install -g @ionic/cli

Now install the capacitor core in our project.

npm install @capacitor/core --save

Now install the capacitor CLI.

npm i -D @capacitor/cli

After that, we will first create an android app with our existing react app.

ionic capacitor add android

This will create the android folder in your root project and install all the required dependencies.

Now run the below command to launch your android project on Android Studio.

npx cap open android

Wait some time and then it will ask you to update the Gradle. Just update the Gradle to the latest version and run the project in the emulator. You can also connect your mobile to run the project live on your mobile phone.

Now open the build menu from the android studio and build your apk file.

Redux for State Management

Khaled Ben Yahya — Sun, 30 Jul 2023 06:31:57 +0000

Redux is a predictable state container for JavaScript applications that can help you manage your application’s global state in a more organized and maintainable way. The key concepts of Redux are the store, reducers, actions, and dispatch.

Store: The store is the single source of truth for your application’s state. It’s a plain JavaScript object that holds all of the application’s state data. The store is created using the createStore function from the Redux library, and it's typically created at the top-level of the application.

Reducers: Reducers are pure functions that take the current state and an action, and return a new state based on the action. Reducers are responsible for updating the store’s state in response to actions dispatched by the application. The state returned from the reducer must be a new object, and not a mutated version of the previous state. Here’s an example of a simple reducer:

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

In the example above, the reducer updates the state based on two actions: INCREMENT and DECREMENT. When an INCREMENT action is dispatched, the reducer returns a new object with the count property incremented by 1. Similarly, when a DECREMENT action is dispatched, the reducer returns a new object with the count property decremented by 1.

Actions: Actions are plain JavaScript objects that describe changes to the application’s state. They must have a type property that describes the type of action being performed, and can also include any additional data needed to perform the action. Actions are typically created using action creator functions, which are functions that return the action object. Here's an example of an action creator function:

function increment() {
  return { type: 'INCREMENT' };
}

In the example above, the increment function returns an action object with a type of INCREMENT.

Dispatch: Dispatch is the function used to send actions to the store. When an action is dispatched, the store calls the reducers with the current state and the action, and the reducers return the new state. The store then updates its state with the new state returned by the reducers. Dispatch is typically called from within components or other parts of the application that need to update the state. Here’s an example of how to use dispatch to update the count:

import { createStore } from 'redux';
import counterReducer from './counterReducer';

const store = createStore(counterReducer);
store.dispatch({ type: 'INCREMENT' });

In the example above, the createStore function creates a new store using the counterReducer. Then, the dispatch function is used to send an INCREMENT action to the store, which updates the count in the store's state.

One of the benefits of using Redux is that it can simplify your application’s architecture and make it more testable and maintainable. By keeping all of your state in a single, centralized location, you can easily reason about changes to your data over time. Additionally, because Redux relies on pure functions and plain JavaScript objects, it’s easy to test and debug your code.

Testability is another sweet key feature of using Redux is that it makes your application more testable. Since your state management is centralized and predictable, it becomes easier to write tests that ensure your application is behaving as expected. By writing tests for your actions and reducers, you can be confident that your state changes are working correctly and that you’re not introducing regressions as you add new features.

describe('incrementCounter', () => {
  it('should increment the counter by 1', () => {
    const initialState = { count: 0 };
    const action = { type: 'INCREMENT_COUNTER' };
    const newState = reducer(initialState, action);
    expect(newState.count).toEqual(1);
  });

The code above defines a test for the incrementCounter action using the Jest testing framework. The test sets up an initial state, dispatches the action, and expects the new state to have a count of 1. This test demonstrates how Redux makes it easy to test individual actions and their effects on the state of the application.

While Redux is a powerful tool, it may not be the best choice for every project. For example, if you have a small application with simple state management needs, you might be better off using React Context or another simpler solution like Zustand which I’m going to using in one of my upcoming projects. It all comes down to your project’s use cases and specificities.

Finally I highly recommend reading the Redux documentation to get started and gradually go in depth in each concept. It definitely helped me have a better understanding quicker than watching Youtube tutorials about it and also to write this article. I decided to write this to keep it as a reference for me so hopefully you find it useful as well. Have a good read!

How to Effectively Remove .env File from Git Repo/History

Khaled Ben Yahya — Sun, 30 Jul 2023 06:27:22 +0000

The .env file is typically located in the root directory of a project and is not committed to version control systems, such as Git. Instead, it is used to store sensitive information, such as database credentials, API keys, and passwords, which should not be publicly visible. By using an .env file, developers can keep their code and configuration separate, making it easier to maintain and deploy applications.

You can check the Youtube tutorial I created here

So if you’ve made a mistake like me and forgot to add “.env” to ‘.gitignore’ before pushing your code to your repository, you can follow these few simple steps to undo the catastrophe. 😅 We’re going to remove it not only from our git repository but most importantly from Git history as well.

Removing the file right away
The best thing to do now is to remove the file right away and add it to your .gitignore file.

# Secret
.env

Yep, the .gitignore file doesn't untrack already committed changes. So how can we fix this?

You can remove a file from Git by running the following command.

git rm -r --cached .env

If we then push this change, you will see that the file is gone in GitHub.

However, this didn’t completely solve our issue. If we look at our Git history, we can still find the file and expose the secrets!

To remove the file altogether, we can use the following command.

`git filter-branch --index-filter "git rm -rf --cached --ignore-unmatch .env" HEAD

You will get some warnings about this messing up your history as this goes through your whole history and 100% removes its existence. To push this, you have to run the following command.

git push --force

If we look at our history, we can still see the commits that include this .env file, but the content is empty.

Few, thanks for having our back Git!