Redux Toolkit with simple analogy

At my home (the App), we have a storeroom — this is our Redux store, where all important things are kept.

One day, my kids went there to play and dropped something — that’s an action (something happened in the app).

I, as a parent, heard the disturbance — this represents how the system becomes aware that a change occurred.

I rushed to the storeroom to see what happened and noticed,some bottles had fallen down, a few were broken, some were still intact

I asked my maid to clean up the mess and rearrange things (dispatch an action), buy new bottles from the market if needed (async thunk for async logic like API calls)

Once she got everything, I asked her to arrange the bottles back properly — that’s what a reducer does: cleanly update the state based on what happened.

When building complex React applications, managing state becomes a challenge. This is where Redux shines — offering a predictable state container that makes large-scale app development easier to manage and debug. In this post, we’ll cover the fundamentals of Redux, its principles, key concepts, and a practical guide to getting started with Redux Toolkit.

Why Redux?

Redux is built around a simple idea:

Maintain a single centralized place for your application state and follow strict patterns to update it.

This makes state predictable, easy to test, and easier to debug — even enabling time-travel debugging.

One-Way Data Flow

React and Redux both rely on one-way data flow. State is read from the store and updated by dispatching actions. All updates must happen immutably, ensuring past states are preserved.

Core Principles of Redux

Redux is based on three principles:

Single Source of Truth- All application state is stored in a single JavaScript object — the store.

State is Read-Only- The only way to change the state is by dispatching actions — plain objects that describe what happened.

Changes via Pure Functions- Updates are handled by pure functions called reducers. This ensures the update logic is testable, predictable, and doesn’t cause side effects.

Redux Terminology Explained

Let’s break down the building blocks of Redux:

1. Store

The central object that holds the entire state tree of your app.

import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({ reducer: rootReducer })

2. Action

A plain object that describes what happened.

const addTodoAction = {
  type: "todos/todoAdded",
  payload: "Buy milk"
}

3. Action Creator

A function that returns an action object.

const addTodo = text => ({
  type: "todos/todoAdded",
  payload: text
})

4. Dispatch

Used to send actions to the store.

store.dispatch(addTodo("Buy milk"))

5. Reducer

A pure function that decides how the state should change based on the action.

function todosReducer(state = [], action) {
  switch (action.type) {
    case "todos/todoAdded":
      return [...state, { text: action.payload }]
    default:
      return state
  }
}

6. Selector

A function to extract specific pieces of state.

const selectTodos = state => state.todos

7. Provider

Wraps your app and provides access to the Redux store.

<Provider store={store}>
  <App />
</Provider>

What Are Redux Slices?

Redux logic is typically split into slices — modular files for managing state and logic for a particular feature.

import { createSlice } from '@reduxjs/toolkit'
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded: (state, action) => {
      state.push({ text: action.payload })
    }
  }
})
export const { todoAdded } = todosSlice.actions
export default todosSlice.reducer

Redux Toolkit uses Immer internally, so you can write “mutable” code that stays immutable under the hood.

Async Logic: Thunks and createAsyncThunk

Sometimes, you need to make async API calls. Redux Toolkit offers createAsyncThunk:

import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async () => {
    const response = await fetch('/api/posts')
    return response.json()
  }
)

In your slice:

extraReducers: builder => {
  builder
    .addCase(fetchPosts.pending, state => { state.status = 'loading' })
    .addCase(fetchPosts.fulfilled, (state, action) => {
      state.status = 'succeeded'
      state.posts = action.payload
    })
    .addCase(fetchPosts.rejected, state => { state.status = 'failed' })
}

Optional Enhancements

• Prepare Callbacks — Preprocess actions before reducer logic (e.g., assigning unique IDs).
• extraReducers — Listen to actions outside of this slice (e.g., logout action to reset state).

Redux vs RTK Query

Redux Toolkit Query (RTK Query) is a powerful abstraction built on top of Redux. It simplifies:

• Data fetching
• Caching
• Auto re-fetching
• Mutation handling

If your Redux use case is mainly API-driven, RTK Query might be all you need.

High level Implementation notes

• Create a slice for your feature and export the reducer
• Add the reducer to the store during configuration
• Provide the store to your app using <Provider>
• In your component: useSelector to read state, useDispatch to trigger updates

Redux can look intimidating at first, but with Redux Toolkit, the boilerplate is dramatically reduced, and the structure becomes intuitive. By mastering slices, thunks, and the core concepts, you’ll be able to manage even the most complex state logic in your React applications.

Check out the official Redux Toolkit documentation for real-world examples and best practices.

Vitest is a fast, lightweight, and modern testing framework designed for Vite-based projects. It provides a seamless testing experience with built-in support for TypeScript, mocking, and React components. In this blog, we’ll explore how Vitest is used in a React + Vite project and highlight some key features that makes it stand out.

Setting Up Vitest

The package.json file includes Vitest as a development dependency and a script to run tests:

"scripts": {
  "test": "vitest"
},
"devDependencies": {
  "vitest": "^3.2.3",
  "@testing-library/react": "^16.3.0",
  "@testing-library/jest-dom": "^6.6.3",
  "@testing-library/user-event": "^14.6.1"
}

To install Vitest and related testing libraries, run:

npm install vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event --save-dev

Writing a Simple Test

An example of a test for a Results component using Vitest and Testing Library:

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import Results from '../../src/poll/Results';
describe('Results Component', () => {
  it('renders the results component correctly', () => {
    render(<Results data={{}} showResult={false} totalVotes={0} />);
    const resultText = screen.queryByTestId('result-text');
    expect(resultText).toBeInTheDocument();
    expect(resultText).toHaveTextContent('yet to start..');
  });
});

describe: Groups related tests

it: Defines an individual test case

expect: Asserts the expected behavior

Mocking Data

Mocking data is essential for testing components in isolation. Vitest makes it easy to mock data and external dependencies.

export default {
  noVotes: {
    options: [],
  },
  withVotes: {
    options: [
      { text: 'Option A', votes: 5 },
      { text: 'Option B', votes: 3 },
    ],
  },
};

You can use this mock data in your tests:

import mockData from './mockData';

it('shows winning text when votes are present', () => {
  render(<Results data={mockData.withVotes} showResult={true} totalVotes={8} />);
  const resultText = screen.queryByTestId('result-text');
  expect(resultText).toHaveTextContent('Option A is winning by 2 votes');
});

Testing User Interactions

Vitest works seamlessly with @testing-library/user-event to simulate user interactions.

import userEvent from '@testing-library/user-event';

it('shows the final result when the button is clicked', async () => {
  render(<Results data={mockData.withVotes} showResult={false} totalVotes={8} />);
  const button = screen.getByTestId('result-btn');
  expect(button).not.toBeDisabled();
  await userEvent.click(button);
  const resultText = await screen.findByTestId('result-text');
  expect(resultText).toHaveTextContent('Option A is the winner');
});

Running Tests

To run your tests, use the test script:

npm run test

Mocking Modules

Vitest allows you to mock modules for testing purposes. For example, you can mock an API call:

import { vi } from 'vitest';
vi.mock('../../src/api', () => ({
  fetchData: vi.fn(() => Promise.resolve({ data: 'mocked data' })),
}));

Debugging Tests

You can debug your tests by inspecting the rendered DOM using screen.debug():

render(<Results data={mockData.noVotes} showResult={false} totalVotes={0} />);
screen.debug();

This outputs the current DOM structure to the console, helping you identify issues.

Coverage Reports

Vitest can generate code coverage reports to ensure your tests cover all critical parts of your application. Add the — coverage flag:

npx vitest --coverage

This generates a detailed report showing which lines of code are covered by your tests.

Vitest is a game-changer for testing modern React applications. Its speed, simplicity, and seamless integration with Vite make it an excellent choice for developers. By combining Vitest with Testing Library, you can write robust, user-focused tests that ensure your application works as expected.

How They Work Together

Vitest: Handles running the tests, mocking modules, and generating reports.

React Testing Library: Provides utilities to test React components in a way that mimics how users interact with the app.

Here’s how Vitest and React Testing Library work together in a test:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import Results from '../../src/poll/Results';
describe('Results Component', () => {
  it('shows the final result when the button is clicked', async () => {
    render(<Results data={{ options: [{ text: 'Option A', votes: 5 }] }} showResult={false} totalVotes={5} />);
    
    const button = screen.getByTestId('result-btn');
    expect(button).not.toBeDisabled();
    await userEvent.click(button);
    const resultText = await screen.findByTestId('result-text');
    expect(resultText).toHaveTextContent('Option A is the winner');
  });
});

In this example:

Vitest: Runs the test and provides the describe, it, and expect functions. React Testing Library: Handles rendering the component and simulating user interaction

Conclusion

Vitest and React Testing Library are not competitors but complementary tools. Vitest focuses on running and organizing tests, while React Testing Library ensures that your tests are user-centric. Together, they provide a powerful testing setup for modern React applications.

You can find the complete source code on GitHub. It includes all the examples and tests used in this blog.

If you found this useful, feel free to ⭐️ or contribute with improvements

Introduction

In today’s web development world, frameworks like React, Vue, and Angular dominate the landscape — offering structure, reusability, and separation of concerns. But what if you could apply those same principles without relying on any external libraries or dependencies?

In this article, we will see how to structure a web application using modular, reusable components in pure, vanilla JavaScript. By embracing clean architecture and focusing on maintainable code.

Whether you’re learning JavaScript, building a lightweight project, or simply exploring how things work under the hood, this approach gives you a solid foundation for writing scalable, organized frontend code — all while keeping things dependency-free.

Key Concepts

1. Components

A component is a function that receives data (props) and returns a DOM element or fragment. This makes the component:

• Reusable: Can be used in multiple places with different data.
• Isolated: Has no side effects or dependencies on global state.

// A generic component function
function createComponent(data) {
  const element = document.createElement('div');
  // ...populate element based on data...
  return element;
}

2. Views

A view is a higher-level structure that organizes and renders multiple components to form a complete section or page of the application. Views:

• Compose components: Use one or more components to build complex UIs.
• Handle layout: Define the structure and placement of components.
• Manage rendering: Often responsible for fetching data and updating the DOM.

function renderMainView(data) {
  const main = document.createElement('main');
  data.items.forEach(item => {
    const component = createComponent(item);
    main.appendChild(component);
  });
  return main;
}

3. Importing and Using Components

Components and views are defined in separate modules/files and imported where needed. This keeps code organized and encourages reuse.

import { renderMainView } from './views/mainView.js';

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    const app = document.getElementById('app');
    app.appendChild(renderMainView(data));
});

4. Stateless and Pure

Components should avoid side effects and only use the data passed to them. This makes them predictable and easy to test.

• Predictable: Easy to understand and reason about.
• Testable: Simple to verify with unit tests.

Conclusion

By following these patterns, we can build scalable, maintainable, and reusable UI components in vanilla JavaScript.

Example Project: Check out a reference implementation here: khatridev/match-opponent

As a developer, I often found myself falling into the trap of endless scrolling on my phone while waiting for my React app to build using Create React App (CRA). The long build times would often pull me away from my laptop by the time the UI finally loaded in the browser. I know many developers can relate to this challenge.

Then one day, while researching solutions for React projects, I discovered Vite —pronounced /vit/

My excitement hit a brief pause when I realized I needed to update my existing Create React App (CRA) project to use Vite. The task seemed daunting at first, but I knew the switch was worth it.

I considered two options:

1. Create a new Vite project and migrate all the code into it. While straightforward, this approach felt too easy and involved recreating configurations from scratch.
2. Integrate Vite configurations into my existing project.

I chose the second path. It allowed me to keep my existing setup intact while smoothly transitioning to Vite. This approach not only made the migration more seamless but also ensured both my codebase and I felt “comfortable” welcoming Vite into the workflow.

This guide follows the project with js/jsx files

Step 1: Add new dependencies

Check package.json of vite project, identify dependencies that are new in the vite project. The most important dependency you will find, @vitejs/plugin-react-swc

SWC is a compiler/transpiler and bundler for Javascript/Typescript, generally it’s faster than other options like babel, tsc, esbuild. It is a super cool topic to deep dive.

npm install @vitejs/plugin-react-swc --save-dev
npm install vite vite-plugin-commonjs --save-dev
npm install typescript @types/node @types/react @types/react-dom --save-dev

Step 2: Create vite.config.ts

treat-js-files-as-jsx is the plugin required if project files are in js and you cannot rename to jsx at the moment

import { defineConfig, transformWithEsbuild } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";


export default defineConfig(({ mode }) => ({
 optimizeDeps: {
  esbuildOptions: {
   loader: {
    '.js': 'jsx'
   }
  }
 },
 server: {
  port: 8080,
 },
 plugins: [
  {
   name: 'treat-js-files-as-jsx',
   async transform(code, id) {
    if (!id.match(/src\/.*\.js$/)) return null; // include ts or tsx for TypeScript support 
    // Use the exposed transform from vite, instead of directly
    // transforming with esbuild
    return transformWithEsbuild(code, id, {
     loader: 'jsx',
     jsx: 'automatic',
    });
   },
  },
  react()
 ].filter(Boolean),
 resolve: {
  alias: {
   "@": path.resolve(__dirname, "./src"),
  },
 },
}));

update custom path for resolve.alias, if any

Step 3: Create vite-env.d.ts file

// vite-env.d.ts
/// <reference types="vite/client" />

Step 4: Modify index.html

Move index html from public folder to the root folder and modify the references with %PUBLIC_URL%.

Add script tag to refer to the main file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    
    <link rel="manifest" href="/manifest.json" />
   
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
    <script type="module" src="/src/index.js"></script>
  </body>
</html>

Step 5: Uninstall react-scripts

npm uninstall react-scripts

Update scripts in package.json

"scripts": {
  "start": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

Step 6: Run the application

npm start

I found improvement in the development and build process and in the phone battery as well :)

Following are list of issue and their fixes that could help,

if you see white screen after running the app, make sure index.html has the script tag for src/index.js (the root file)

Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

import { defineConfig, transformWithEsbuild } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";


export default defineConfig(({ mode }) => ({
 optimizeDeps: {
  esbuildOptions: {
   loader: {
    '.js': 'jsx'
   }
  }
 },
 server: {
  port: 8080,
 },
 plugins: [
  {
   name: 'treat-js-files-as-jsx',
   async transform(code, id) {
    if (!id.match(/src\/.*\.js$/)) return null;// include ts or tsx for TypeScript support 

    // Use the exposed transform from vite, instead of directly
    // transforming with esbuild
    return transformWithEsbuild(code, id, {
     loader: 'jsx',
     jsx: 'automatic',
    });
   },
  },
  react()
 ].filter(Boolean),
 resolve: {
  alias: {
   "@": path.resolve(__dirname, "./src"),
  },
 },
}));

Uncaught ReferenceError: global is not defined

export default defineConfig({
  
  define: {
    // By default, Vite doesn't include shims for NodeJS/
    // necessary for segment analytics lib to work
    global: {},
  },
})

Uncaught ReferenceError: process is not defined

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})