DEV Community: Suvankar Majumder

Smarter state management with Redux Toolkit (RTK)

Suvankar Majumder — Sun, 31 Jan 2021 05:34:17 +0000

Redux is one of the most sought-after tools for state management in React and React Native applications.

But one of the major issues developers especially beginners face is the amount of boilerplate and unnecessary code that is required to set up Redux in a project.

While looking for answers, the React team found a solution for the three common concerns of Redux

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"

Enters Redux Toolkit...

Which according to the documentation is,

The official, opinionated, batteries-included toolset for efficient Redux development

RTK not only removes a lot of complications in Redux but also offers enhancements giving a better development experience in the process.

It uses Redux core for state management, Reselect as a selector library, Immer which gives the functionality to directly mutate the state and Redux Thunk for async tasks.

In this post, we will set-up RTK for the good ol' Counter Application.

To begin with we need to install the required dependencies.

npm install react-redux @reduxjs/toolkit

Store Configuration

We will create our store in store/index.js.

// src/store/index.js

import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';

import reducer from './counterSlice';

const middleware = getDefaultMiddleware();
const store = configureStore({
  reducer,
  middleware,
});

export default store;

Creating the Slice

Gone are the days of creating separate files for Reducers, Actions, Action Creators, and those lengthy switch-cases to handle these Actions in our reducers.

RTK provides us with a createSlice function which takes in a single object with the name of the slice, initial state, and all of our reducers.

// src/store/counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  counter: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      ++state.counter;
    },
    decrement: (state) => {
      --state.counter;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

As you can see we are mutating the state directly instead of returning a new object, RTK uses Immer under the hood to handle immutability in the store.
We are exporting the counterSlice.reducer object which is provided by the createSlice method. This is the reducer that we imported and passed to configureStore earlier in store/index.js.
RTK also automatically generates our actions for us, which are available in the counterSlice.actions object.

That's all folks. With just two files and a few lines of code, we are able to bootstrap RTK in our application.

Watch this space for more!!

Desktop application with Electron & React (CRA)

Suvankar Majumder — Sun, 24 May 2020 07:56:25 +0000

When it comes to building cross-platform Desktop applications with Javascript, Electron is one of the most sought after choices of developers.

In this post, we will learn to create a production-ready configuration of React with Electron.

To begin with we need to create our project with create-react-app (CRA).

npx create-react-app electron-react

The next thing we will do is to create a new folder named electron inside of electron-react. This is where we will put all of our electron code.
We will also install electron & electron-builder (to package our application) as dev dependencies.

npm i -D electron electron-builder

We need to make a few changes in the package.json file.
First, we need to add the main property to our package.json file, this will be the entry point to our electron application.

"main": "electron/main.js",
"homepage": "./",

Next will add a few scripts to start and package our electron application.

"start": "export BROWSER=none && react-scripts start",
"start-win": "set BROWSER=none && react-scripts start",
"start-electron": "export ELECTRON_START_URL=http://localhost:3000 && electron .",
"start-electron-win": "set ELECTRON_START_URL=http://localhost:3000 && electron .",
"build": "react-scripts build",
"build-electron": "mkdir build/src && cp -r electron/. build/electron",
"build-electron-win": "mkdir build\\src && Xcopy /E /I /Y electron build\\electron",
"package": "npm run build && npm run build-electron && electron-builder build -c.extraMetadata.main=build/electron/main.js --publish never",
"package-win": "npm run build && npm run build-electron-win && electron-builder build -c.extraMetadata.main=build/electron/main.js --publish never",

Note: The scripts that end with -win are for Windows platform, if you are on Windows you need to run these scripts.

Finally, we will add the build property which will be used by electron-builder to package the application.

"build": {
    "appId": "com.example.electron-react",
    "productName": "electron-react",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
}

Now that all of our configurations are done we can finally proceed to write some code.
Create a main.js file in the electron/ folder and add the following code.

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({ width: 600, height: 600, show: false });
  mainWindow.loadURL(
    !app.isPackaged
      ? process.env.ELECTRON_START_URL
      : url.format({
          pathname: path.join(__dirname, '../index.html'),
          protocol: 'file:',
          slashes: true,
        })
  );

  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
};

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Note: app.isPackaged is a boolean flag which is true if the application is packaged and false otherwise, this behavior can be used to determine whether the app is running in production or development environment.

Go ahead and run npm start and npm run start-electron.
You should see something like this:

Congratulations!! Your first desktop application is up and running!!

Now all you need to package your application is to run npm run package.

Final notes

That's all folks. That is all you need to set up a basic desktop application using React and Electron. Check out the GitHub repo for this tutorial.

Watch this space for more!!