Forem: Abhishek Panwar

Why react components starts with capital letter ?

Abhishek Panwar — Fri, 20 Sep 2024 18:56:12 +0000

Do you know why react components start with capital letter????

The reason behind this is, react components written in JSX which internally convert it to react.createElement API. This create element function is convert into plain javascript object. A fundamebtal data structure which is known as React Fiber. This whole happen because of Babel.

Babel takes the component and convert it to a React Fiber object.
When babel encounters a name string with a capital letter it recognise it as a refernece not a string. On contrary every thing else is converted into string

Follow for more tips and topics 😁

this keyword in JS

Abhishek Panwar — Wed, 18 Sep 2024 15:59:57 +0000

this is a fundamental concept in JavaScript, referring to the context in which a function is executed. It’s a keyword that changes its value depending on how a function is called, m7aking it a bit tricky to grasp at first. Let’s break it down:

Global Context: In the global scope, this refers to the global object (e.g., window in a browser or global in Node.js).
Function Context: When a function is called as a standalone function (not as a method of an object), this is also the global object.
Method Context: When a function is called as a method of an object (e.g., obj.method()), this refers to the object itself.
Constructor Context: When a function is called with the new keyword (e.g., new MyClass()), this refers to the newly created object.
Arrow Functions: Arrow functions (=>) inherit the this context from their surrounding scope, unlike traditional functions.

Best Practices:

Use call() or apply() to explicitly set this when needed.
Use bind() to create a new function with a fixed this context.
Avoid using this in global scope or standalone functions; instead, use a closure or a separate scope.
Common Pitfalls:

Losing this context in callbacks or nested functions.
Inconsistent this values due to function hoisting or dynamic method addition.
ES6+ Changes:

Arrow functions inherit this from their surrounding scope.
Classes introduce a new this context, similar to constructors.
Code Examples:

// Global context
console.log(this); // window (browser) or global (Node.js)

// Function context
function foo() {
  console.log(this); // global object
}
foo();

// Method context
const obj = {
  method() {
    console.log(this); // obj
  }
};
obj.method();

// Constructor context
function MyClass() {
  console.log(this); // new MyClass instance
}
const instance = new MyClass();

// Arrow function context
const arrow = () => {
  console.log(this); // inherits surrounding scope's this
};
arrow.call({ foo: 'bar' }); // outputs { foo: 'bar' }

By understanding the different contexts and best practices for using this in JavaScript, you’ll be well-equipped to write robust and predictable code.

Understanding the keyword in JavaScript is crucial as it dynamically changes based on the context of function execution. Globally, it refers to the global object; in regular functions, it's also global; in methods, it points to the object; in constructors, it indicates the new instance; and arrow functions inherit it from their scope. Utilize call(), apply(), and bind() to manage context effectively, and prefer closures or separate scopes over using it directly in the global context. Be cautious of losing context in callbacks and nested functions. ES6+ features like classes and arrow functions bring additional context-handling capabilities.

Complete redux toolkit (Part -5)

Abhishek Panwar — Thu, 12 Sep 2024 11:49:17 +0000

Here is the draft for Part 5: Testing Strategies for Redux Toolkit and RTK Query. This part will cover the best practices for testing Redux Toolkit and RTK Query, focusing on unit testing, integration testing, and ensuring your code is robust and maintainable.

Part 5: Testing Strategies for Redux Toolkit and RTK Query

1. Importance of Testing in Redux Applications

Testing is a crucial aspect of any application development process. It ensures that your application behaves as expected, helps catch bugs early, and provides confidence when making changes. With Redux Toolkit (RTK) and RTK Query, testing becomes more manageable due to their simplified APIs and reduced boilerplate. In this part, we will explore different testing strategies to ensure Redux applications are reliable and maintainable.

2. Setting Up a Testing Environment

Before diving into specific testing strategies, make sure you have a proper testing environment set up. For a typical React + Redux Toolkit project, you might use tools like:

Jest: A popular testing framework for JavaScript.
React Testing Library (RTL): A lightweight solution for testing React components.
MSW (Mock Service Worker): A library for mocking API requests during testing.

To install these libraries, run:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom msw

3. Unit Testing Redux Slices

Redux slices are the core of state management in Redux Toolkit. Unit testing these slices ensures that reducers and actions work correctly.

Step 1: Testing Reducers

Consider the following postsSlice.js:

// src/features/posts/postsSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  posts: [],
  status: 'idle',
  error: null,
};

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    addPost: (state, action) => {
      state.posts.push(action.payload);
    },
    removePost: (state, action) => {
      state.posts = state.posts.filter(post => post.id !== action.payload);
    },
  },
});

export const { addPost, removePost } = postsSlice.actions;
export default postsSlice.reducer;

Unit Tests for postsSlice Reducer:

// src/features/posts/postsSlice.test.js
import postsReducer, { addPost, removePost } from './postsSlice';

describe('postsSlice reducer', () => {
  const initialState = { posts: [], status: 'idle', error: null };

  it('should handle initial state', () => {
    expect(postsReducer(undefined, {})).toEqual(initialState);
  });

  it('should handle addPost', () => {
    const newPost = { id: 1, title: 'New Post' };
    const expectedState = { ...initialState, posts: [newPost] };

    expect(postsReducer(initialState, addPost(newPost))).toEqual(expectedState);
  });

  it('should handle removePost', () => {
    const initialStateWithPosts = { ...initialState, posts: [{ id: 1, title: 'New Post' }] };
    const expectedState = { ...initialState, posts: [] };

    expect(postsReducer(initialStateWithPosts, removePost(1))).toEqual(expectedState);
  });
});

Explanation:

Initial State Test: Validates that the reducer returns the correct initial state.
Action Tests: Tests addPost and removePost actions to ensure they modify the state correctly.

4. Testing RTK Query API Slices

RTK Query simplifies API integration, but testing these API slices is slightly different from testing regular slices. You need to mock API requests and validate how the slice handles those requests.

Step 1: Setting Up MSW for Mocking API Requests

Create a setupTests.js file to configure MSW:

// src/setupTests.js
import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  // Mocking GET /posts endpoint
  rest.get('https://jsonplaceholder.typicode.com/posts', (req, res, ctx) => {
    return res(ctx.json([{ id: 1, title: 'Mock Post' }]));
  }),
  // Mocking POST /posts endpoint
  rest.post('https://jsonplaceholder.typicode.com/posts', (req, res, ctx) => {
    return res(ctx.json({ id: 2, ...req.body }));
  })
);

// Establish API mocking before all tests
beforeAll(() => server.listen());
// Reset any request handlers that are declared as a part of our tests (i.e. for testing one-time errors)
afterEach(() => server.resetHandlers());
// Clean up after the tests are finished
afterAll(() => server.close());

Step 2: Writing Tests for RTK Query Endpoints

Testing the fetchPosts query from postsApi.js:

// src/features/posts/postsApi.test.js
import { renderHook } from '@testing-library/react-hooks';
import { Provider } from 'react-redux';
import { setupApiStore } from '../../testUtils';
import { postsApi, useFetchPostsQuery } from './postsApi';
import store from '../../app/store';

describe('RTK Query: postsApi', () => {
  it('fetches posts successfully', async () => {
    const { result, waitForNextUpdate } = renderHook(() => useFetchPostsQuery(), {
      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
    });

    await waitForNextUpdate();

    expect(result.current.data).toEqual([{ id: 1, title: 'Mock Post' }]);
    expect(result.current.isLoading).toBeFalsy();
  });
});

Explanation:

MSW Setup: setupServer configures MSW to mock API endpoints.
Render Hook: The renderHook utility from React Testing Library is used to test custom hooks, such as useFetchPostsQuery.
Mocked API Response: Validates the behavior of the hook with mocked API responses.

5. Integration Testing Redux with Components

Integration tests focus on testing how different pieces work together. In Redux applications, this often means testing components that interact with the Redux store.

Step 1: Writing Integration Tests with React Testing Library

Integration test for the PostsList component:

// src/features/posts/PostsList.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from '../../app/store';
import PostsList from './PostsList';

test('renders posts fetched from the API', async () => {
  render(
    <Provider store={store}>
      <PostsList />
    </Provider>
  );

  expect(screen.getByText(/Loading.../i)).toBeInTheDocument();

  // Wait for posts to be fetched and rendered
  await waitFor(() => {
    expect(screen.getByText(/Mock Post/i)).toBeInTheDocument();
  });
});

Explanation:

Loading State Test: Checks that the loading indicator is displayed initially.
Data Render Test: Waits for the posts to be fetched and ensures they are rendered correctly.

6. Best Practices for Testing Redux Toolkit and RTK Query

Use MSW for API Mocking: MSW is a powerful tool for mocking network requests and simulating different scenarios, such as network errors or slow responses.
Test Reducers in Isolation: Reducer tests are pure functions and should be tested separately to ensure they handle actions correctly.
Test Hooks in Isolation: Use renderHook from React Testing Library to test hooks independently from UI components.
Use setupApiStore for API Slice Testing: When testing RTK Query endpoints, use setupApiStore to mock the Redux store with API slices.
Focus on Integration Tests for Components: Combine slice and component tests for integration testing to ensure they work together correctly.
Ensure Coverage for Edge Cases: Test edge cases, such as API errors, empty states, and invalid data, to ensure robustness.

7. Conclusion

In this part, we covered various testing strategies for Redux Toolkit and RTK Query, including unit testing reducers and slices, testing RTK Query API slices with MSW, and writing integration tests for components interacting with the Redux store. By following these best practices, you can ensure that your Redux applications are robust, reliable, and maintainable.

This concludes our series on Redux Toolkit and RTK Query! I hope these parts have helped you understand Redux Toolkit from the basics to advanced topics, including effective testing strategies.

Happy coding, and keep testing to ensure your apps are always in top shape!

Complete redux toolkit (Part - 4)

Abhishek Panwar — Wed, 11 Sep 2024 04:24:09 +0000

Part 4: Advanced Topics in RTK Query.

This part will focus on advanced features and use cases in RTK Query, including customising queries, handling authentication, optimistic updates, and performance optimisation.

Part 4: Advanced Topics in RTK Query

1. Introduction to Advanced RTK Query Concepts

In the previous part, we covered the basics of using RTK Query for fetching and mutating data. Now, we will dive into more advanced features that make RTK Query even more powerful. These features allow you to customize queries, manage authentication, optimize performance, and handle optimistic updates for a smoother user experience.

2. Customizing `baseQuery` for Authentication

When working with APIs that require authentication, you need to customize the baseQuery to include authentication headers like JWT tokens or API keys.

Step 1: Create a Custom `baseQuery`

You can create a custom baseQuery function that adds authorization headers to every request.

// src/app/customBaseQuery.js
import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const customBaseQuery = fetchBaseQuery({
  baseUrl: 'https://jsonplaceholder.typicode.com/',
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.token; // Assuming auth slice has token
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  },
});

export default customBaseQuery;

Explanation:

prepareHeaders: This function allows you to customize headers for each request. It retrieves the token from the Redux store and attaches it to the Authorization header.

Step 2: Use the Custom `baseQuery` in `createApi`

Modify your postsApi.js file to use the custom baseQuery:

// src/features/posts/postsApi.js
import { createApi } from '@reduxjs/toolkit/query/react';
import customBaseQuery from '../../app/customBaseQuery';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: customBaseQuery, // Use the custom base query here
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: (result) =>
        result ? result.map(({ id }) => ({ type: 'Post', id })) : ['Post'],
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
});

export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

3. Optimistic Updates with RTK Query

Optimistic updates allow you to immediately update the UI before the server confirms the mutation, providing a smoother user experience. If the server returns an error, the UI can revert to the previous state.

Step 1: Implement Optimistic Updates in Mutations

You can implement optimistic updates using the onQueryStarted lifecycle method provided by RTK Query.

// src/features/posts/postsApi.js
addPost: builder.mutation({
  query: (newPost) => ({
    url: 'posts',
    method: 'POST',
    body: newPost,
  }),
  invalidatesTags: ['Post'],
  onQueryStarted: async (newPost, { dispatch, queryFulfilled }) => {
    // Optimistic update: immediately add the new post to the cache
    const patchResult = dispatch(
      postsApi.util.updateQueryData('fetchPosts', undefined, (draftPosts) => {
        draftPosts.push({ id: Date.now(), ...newPost }); // Fake ID for optimistic update
      })
    );
    try {
      await queryFulfilled; // Await server response
    } catch {
      patchResult.undo(); // Revert if the mutation fails
    }
  },
}),

Explanation:

onQueryStarted: This lifecycle method is triggered when a mutation starts. It provides dispatch and queryFulfilled parameters to manage cache updates.
postsApi.util.updateQueryData: This utility function allows you to optimistically update cached data.
patchResult.undo(): Reverts the optimistic update if the server returns an error.

4. Handling Dependent Queries

Sometimes, you may need to perform dependent queries, where one query depends on the result of another. RTK Query provides the skip parameter to control when a query is executed.

Example: Fetch Post Details Based on Selected Post ID

// src/features/posts/PostDetails.js
import React from 'react';
import { useFetchPostQuery } from './postsApi';

const PostDetails = ({ postId }) => {
  const { data: post, error, isLoading } = useFetchPostQuery(postId, { skip: !postId });

  if (!postId) return <p>Select a post to view details.</p>;
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading post details.</p>;

  return (
    <div>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
  );
};

export default PostDetails;

Explanation:

useFetchPostQuery: A query hook that takes postId as an argument. If postId is not provided, the query is skipped using { skip: !postId }.

5. Polling and Real-Time Data with RTK Query

RTK Query supports polling to keep data fresh at a specified interval. This is useful for real-time data synchronization.

Step 1: Use Polling in Queries

You can enable polling for any query using the pollingInterval option.

// src/features/posts/PostsList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery(undefined, {
    pollingInterval: 30000, // Poll every 30 seconds
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>An error occurred: {error.message}</p>;

  return (
    <section>
      <h2>Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostsList;

Explanation:

pollingInterval: This option specifies the interval (in milliseconds) at which the query should poll the server for new data.

6. Optimizing Performance with `selectFromResult`

RTK Query provides the selectFromResult option for advanced performance optimizations by allowing you to select specific data from the query result.

Step 1: Using `selectFromResult` to Optimize Re-Renders

The selectFromResult option can be used to prevent unnecessary re-renders when only a subset of the query result is needed.

// src/features/posts/PostTitleList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostTitleList = () => {
  const { data: posts } = useFetchPostsQuery(undefined, {
    selectFromResult: ({ data }) => ({ titles: data?.map((post) => post.title) }),
  });

  return (
    <section>
      <h2>Post Titles</h2>
      <ul>
        {posts?.map((title, index) => (
          <li key={index}>{title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostTitleList;

Explanation:

selectFromResult: This option allows you to select only the titles from the fetched posts, preventing unnecessary re-renders when other data in the query result changes.

7. Conclusion and Next Steps

In this part, we explored advanced topics in RTK Query, such as customizing baseQuery for authentication, handling optimistic updates, managing dependent queries, using polling for real-time data synchronization, and optimizing performance with selectFromResult. RTK Query's rich feature set makes it a powerful tool for handling data fetching and caching in modern Redux applications.

In the next part, we'll discuss Testing Strategies for Redux Toolkit and RTK Query, covering unit testing, integration testing, and best practices for ensuring robust and maintainable code.

Stay tuned for Part 5: Testing Strategies for Redux Toolkit and RTK Query!

Complete redux toolkit (Part -3 )

Abhishek Panwar — Tue, 10 Sep 2024 12:13:53 +0000

Part 3: Introduction to RTK Query

In this part we will cover RTK query

1. What is RTK Query?

While Redux Toolkit provides powerful tools to manage state and asynchronous logic, it still requires significant boilerplate code to handle data fetching and caching. RTK Query, introduced in Redux Toolkit v1.6, aims to solve this problem by providing a set of powerful tools for efficient data fetching and caching with minimal setup.

Key features of RTK Query:

Data Fetching and Caching: Automatically handles caching, invalidation, and refetching.
Optimistic Updates and Realtime Synchronization: Easily manage optimistic updates and real-time data synchronization.
Declarative and Simple API: Intuitive API design with minimal boilerplate code.
Integrated with Redux Toolkit: Built on top of Redux Toolkit, allowing seamless integration.

2. Setting Up RTK Query

To get started with RTK Query, we need to define an API service that specifies how to fetch data and what endpoints are available. Let’s create an example using a simple posts API.

Step 1: Define an API Service

Create a new file named postsApi.js in the features/posts directory. This file will define the API endpoints for fetching and mutating posts.

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// Define an API service using RTK Query
export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

// Export hooks for usage in functional components
export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

Explanation:

createApi: This function is used to define an API service. It generates an API slice, automatically managing the store, reducers, and actions for you.
baseQuery: A function that defines the base URL for your API. fetchBaseQuery is a lightweight wrapper around the standard fetch API.
endpoints: A function that defines the endpoints for the API. We define two endpoints here: fetchPosts for querying data and addPost for creating a new post.

Step 2: Integrate API Service into the Redux Store

Add the postsApi reducer to the store and configure middleware to enable caching and invalidation.

Update store.js to integrate postsApi:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { postsApi } from '../features/posts/postsApi';

const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [postsApi.reducerPath]: postsApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling, and other features of RTK Query
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
});

export default store;

3. Using RTK Query in Components

RTK Query generates custom hooks based on the endpoints defined in the API service. These hooks are used to perform data fetching, mutations, and manage caching automatically.

Step 1: Fetching Data with `useFetchPostsQuery`

Create a PostsList.js component to fetch and display the list of posts.

// src/features/posts/PostsList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>An error occurred: {error.message}</p>;

  return (
    <section>
      <h2>Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostsList;

Explanation:

useFetchPostsQuery: A custom hook generated by RTK Query for the fetchPosts endpoint. It returns an object containing the fetched data (data), loading state (isLoading), and error state (error).
The component conditionally renders loading, error, or data states based on the hook output.

Step 2: Adding Data with `useAddPostMutation`

Create a AddPostForm.js component to add new posts using the addPost mutation.

// src/features/posts/AddPostForm.js
import React, { useState } from 'react';
import { useAddPostMutation } from './postsApi';

const AddPostForm = () => {
  const [addPost, { isLoading }] = useAddPostMutation();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (title && content) {
      await addPost({ title, body: content }).unwrap();
      setTitle('');
      setContent('');
    }
  };

  return (
    <section>
      <h2>Add a New Post</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Post Title"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Post Content"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Adding...' : 'Add Post'}
        </button>
      </form>
    </section>
  );
};

export default AddPostForm;

Explanation:

useAddPostMutation: A custom hook generated by RTK Query for the addPost mutation. It provides a function (addPost) to trigger the mutation and a loading state (isLoading).
unwrap(): Allows us to unwrap the resolved or rejected payload from the mutation to handle side effects after the request.

4. Handling Cache, Errors, and Optimistic Updates

RTK Query automatically handles caching, error states, and invalidates the cache when mutations occur. You can further customize the behavior with tags and other configurations.

Step 1: Using `providesTags` and `invalidatesTags`

Modify the postsApi to use tags for cache invalidation:

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: (result) =>
        result ? result.map(({ id }) => ({ type: 'Post', id })) : ['Post'],
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
});

export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

Explanation:

providesTags: This is used to tag the data fetched from the fetchPosts query. It helps in efficiently invalidating the cache when new data is added.
invalidatesTags: This is used in the addPost mutation to invalidate the cache and refetch the updated data.

5. Conclusion and Next Steps

In this part, we explored how to use RTK Query to handle data fetching and caching in Redux applications. We covered setting up an API service, defining endpoints, and using generated hooks for querying and mutating data. RTK Query simplifies data fetching and state management with minimal code, making it a powerful tool for modern Redux applications.

In the next part, we'll dive into Advanced Topics in RTK Query, such as customizing queries, using baseQuery, handling authentication, and optimizing performance.

Stay tuned for Part 4: Advanced Topics in RTK Query!

Complete Redux Toolkit - Async Logic with(Part -2)

Abhishek Panwar — Mon, 09 Sep 2024 10:44:15 +0000

1. Introduction to Async Logic in Redux Toolkit

Handling asynchronous logic in Redux often involves a lot of boilerplate code, such as creating action types, action creators, and reducers to handle different states (loading, success, error). Redux Toolkit simplifies this with createAsyncThunk, which allows you to define a "thunk" for asynchronous operations with minimal setup.

createAsyncThunk:

Automatically generates pending, fulfilled, and rejected action types.
Makes it easier to handle side effects like API requests.
Integrates seamlessly with slices created using createSlice.

2. Using createAsyncThunk for API Calls

Let's walk through creating an async thunk to fetch data from a public API and manage different loading states.

Step 1: Setting Up a Simple API Service
We'll use a free public API to demonstrate this example. Let's assume we have an API endpoint that returns a list of posts.

Step 2: Creating an Async Thunk
First, create a new slice file named postsSlice.js inside the features/posts directory. We'll use createAsyncThunk to fetch posts asynchronously.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  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, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

Explanation:

createAsyncThunk: This function takes two arguments: a string action type and an asynchronous function. The async function is where the API call happens. When the promise resolves, the data is returned and automatically dispatched as the fulfilled action payload.

extraReducers: This is used to handle actions generated by createAsyncThunk. We manage three states: pending, fulfilled, and rejected.

3. Integrating Thunks into Components

Now, let's use the fetchPosts thunk in a React component and display the data.

Step 1: Create a PostsList Component
Create a PostsList.js component in the features/posts directory:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = <p>Loading...</p>;
  } else if (status === 'succeeded') {
    content = (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  } else if (status === 'failed') {
    content = <p>{error}</p>;
  }

  return (
    <section>
      <h2>Posts</h2>
      {content}
    </section>
  );
};

export default PostsList;

Explanation:

The useEffect hook dispatches fetchPosts when the component mounts, but only if the current status is 'idle'.
The status is checked to determine which content to render (loading spinner, list of posts, or error message).

Step 2: Add PostsList to the App

Update the main App.js file to include the PostsList component:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    <div className="App">
      <PostsList />
    </div>
  );
}

export default App;

4. Best Practices for Async Thunks

Avoid Heavy Logic in Components: Keep components clean by dispatching thunks to handle asynchronous logic.
Centralize Error Handling: Handle errors in your slice rather than repeating logic in each component.
Normalize Data: Consider normalizing state shape using libraries like normalizr to manage complex data structures efficiently.
Memoize Selectors: Use createSelector from reselect to memoize selectors for better performance.

5. Conclusion and Next Steps
In this part, we explored how to handle asynchronous logic in Redux Toolkit using createAsyncThunk. We learned how to create an async thunk, handle different states, and use it in a component. In the next part, we'll dive into RTK Query—a powerful tool for data fetching and caching that further simplifies Redux development.

_
Stay tuned for Part 3: Introduction to RTK Query!_

Complete Redux toolkit (Part-1)

Abhishek Panwar — Sun, 08 Sep 2024 04:04:51 +0000

Purpose of Redux Toolkit

We already know redux is a powerful state management library for our JavaScript applications, specially when working with React.
But working with redux is hard due to its heavy code for setting up redux. Which makes it hard to maintain and debug. Thats where Redux Toolkit comes to help.
Problems Redux toolkit solve

Setting up store is too complecated.
Adding many package to work with redux e.g., Middleware , tools.
Redux needs too much code to setup

Redux toolkit is the official and recommended way to write redux logic.It provide a set of tools to simplify the development, reduce boilerplate code which help make scalability and maintainable application.

Key benefits of Redux Toolkit:

Less boilerplate code: Remove the need for action creators and constants.
Simplified store setup: Provides a single API to configure the store with sensible defaults.
Built-in support for immutability and DevTools: Automatically enables Redux DevTools and integrates with Immer for immutability.
Better TypeScript support: Provides better typings and integrates well with TypeScript.

We can use redux toolkit with any javascript library so we setup redux toolkit with react.

Setting Up Redux Toolkit in a React Application

Step 1: Create a New React Project

First, let's create a new React application. You can use create-react-app or Vite for this purpose. We'll use create-react-app here for simplicity.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

Step 2: Install Redux Toolkit and React-Redux

Next, install the necessary packages: @reduxjs/toolkit and react-redux.

npm install @reduxjs/toolkit react-redux

Understanding Slices and Reducers

A slice is a collection of Redux reducer logic and actions for a specific feature of your application. Redux Toolkit provides the createSlice function to help create a slice of state with minimal boilerplate.

Step 1: Create a Slice
Let's create a simple counter slice. Create a new file named counterSlice.js inside a features/counter directory:

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

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

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

Here, we define a slice named counter with an initial state and three reducers (increment, decrement, and incrementByAmount). The createSlice function automatically generates action creators for each reducer function.

Configuring the Redux Store

Now that we have our slice, let's configure the Redux store. Redux Toolkit provides a configureStore function that sets up the store with good defaults.

Step 1: Create a Store
Create a store.js file inside a app directory:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Step 2: Provide the Store to Your App
Wrap your React application in a component from react-redux and pass it the store. Update the index.js file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Connecting Components to the Store

To interact with the Redux store, use the useSelector and useDispatch hooks provided by react-redux.
Step 1: Access State with useSelector
Use the useSelector hook to access state from the store

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

Step 2: Use Counter Component in Your App
Import and use the Counter component in your main App component:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

Conclusion and Next Steps

In this part, we covered the basics of setting up Redux Toolkit in a React application, including creating slices, configuring the store, and connecting components to the Redux store using hooks. In the next part, we will dive deeper into handling asynchronous logic with createAsyncThunk to fetch data from APIs and manage different loading states.

Stay tuned for Part 2: Advanced Redux Toolkit - Async Logic with createAsyncThunk!

REST API and Its Architecture

Abhishek Panwar — Sat, 07 Sep 2024 12:06:31 +0000

Introduction

In today's web development world, APIs (Application Programming Interfaces) play a crucial role in enabling communication between different software systems. One of the most widely used types of API is the REST API, which stands for Representational State Transfer. REST APIs have become the standard for building scalable, maintainable, and efficient web services. In this blog, we will dive deep into what REST APIs are, their principles, architecture, components, and how to design and implement them effectively.

What is a REST API?
REST (Representational State Transfer) is an architectural style for designing networked applications. It relies on a stateless, client-server communication model and is based on standard HTTP methods. REST APIs allow different applications to communicate over the internet using a simple set of conventions or we can say rules.

A REST API is an interface that allows clients (such as web or mobile applications like our browser or phones) to interact with a server by sending HTTP requests and receiving HTTP responses. The server provides access to resources, which can be anything from a user profile to an image or a blog post.
Key Principles of REST
To be considered RESTful, an API must have following six principles:

Client-Server Architecture: The client and server should be independent of each other. The client is responsible for the user interface and user experience, while the server handles the backend logic, data storage, and processing.
Statelessness: Each request from the client to the server must contain all the information needed to understand and process the request. The server does not store any client information between requests. This makes server design and enhances the scalability.
Cacheability: Responses from the server must be clearly defined as cacheable or non-cacheable. If a response is cacheable, the client can reuse the response data for future requests, reducing the load on the server and improving performance.
Uniform Interface: REST APIs must provide a consistent and standardised way of interacting with resources. This is achieved through four sub-principles: - Identification of Resources: Resources are identified using URIs (Uniform Resource Identifiers). - Manipulation of Resources Through Representations: Clients interact with resources by sending representations (e.g., JSON, XML) in requests. - Self-descriptive Messages: Each request and response must contain enough information to describe how to process the message. - Hypermedia as the Engine of Application State (HATEOAS): Clients should navigate the API dynamically using hyperlinks provided in responses.
Layered System: The architecture should allow the use of intermediary layers between the client and server, such as caching, load balancing, and security layers, without the client being aware of these layers.
Code on Demand (Optional): Servers can extend client functionality by sending executable code, such as JavaScript, to be executed on the client side. This is an optional constraint in REST.

REST API Architecture
The architecture of a REST API consists of several key components that work together to create communication between clients and servers:

Resources: Resources are the core concept of REST APIs. They represent the data or objects that the API provides access to, such as users, products, orders, etc. Each resource is identified by a unique URI.
HTTP Methods: REST APIs use standard HTTP methods to perform CRUD (Create, Read, Update, Delete) operations on resources:
- GET: Pull data from the resource.
- POST: Create new data changes in resource(DB).
- PUT: Update an existing record in your data(DB).
- DELETE: Remove the specific data from DB.
- PATCH: Partially update an existing data.
- OPTIONS: Retrieve supported HTTP methods for a resource.
HTTP Status Codes: REST APIs use standard HTTP status codes to indicate the outcome of a request. Common status codes include:
- 200 OK: The request was successful.
- 201 Created: A new resource was created successfully.
- 204 No Content: The request was successful, but there is no content to return.
- 400 Bad Request: The request was malformed or invalid.
- 401 Unauthorized: The client must authenticate to access the resource.
- 404 Not Found: The requested resource was not found.
- 500 Internal Server Error: An unexpected error occurred on the server.
Representation Format: REST APIs support various representation formats for data exchange, including JSON (JavaScript Object Notation), XML (eXtensible Markup Language), and HTML. JSON is the most commonly used format due to its simplicity and compatibility with JavaScript.
Endpoints: Endpoints are the URLs that define where a particular resource can be accessed from the server. Each endpoint corresponds to a specific resource and is usually designed using nouns rather than verbs (e.g., /users, /products).

Designing a RESTful API

Designing a RESTful API involves several steps to ensure that it adheres to REST principles and provides a seamless experience for clients. Here are some best practices for designing a REST API:

Use Nouns for Endpoints: Endpoints should be named after resources (nouns) rather than actions (verbs). For example, use /users to represent a collection of users rather than /getUsers.
Use HTTP Methods Appropriately: Use the correct HTTP methods for each operation. For example, use GET to retrieve data, POST to create data, PUT to update data, and DELETE to remove data.
Implement Filtering, Sorting, and Pagination: For endpoints that return a list of resources, implement filtering, sorting, and pagination to improve performance and provide more control to the client. Use query parameters like ?sort=name, ?page=2, or ?limit=10 to achieve this.
Version Your API: Always version your API to handle changes without breaking existing clients. Include the version number in the URL (e.g., /api/v1/users) or in headers.
Provide Meaningful HTTP Status Codes: Return appropriate HTTP status codes to indicate the outcome of a request. Avoid using 200 OK for every response.
Use Hypermedia (HATEOAS): Include links in responses to allow clients to navigate the API dynamically without hardcoding URLs.
Ensure Security: Secure your API using HTTPS to encrypt data in transit. Implement authentication (e.g., OAuth, JWT) and Authorization to control access to resources.
Handle Errors Gracefully: Provide meaningful error messages and HTTP status codes to help clients understand what went wrong. Create a reusable error format with details like error code, message, and possible solutions.

Example of a REST API Design

Let's consider an example of a simple REST API for managing a collection of books:

Endpoint: /api/v1/books
GET /api/v1/books: Get a list of all books from db. - POST /api/v1/books: Create a new book in db.
Endpoint: /api/v1/books/{id}
GET /api/v1/books/{id}: Return a specific book by ID. - PUT /api/v1/books/{id}: Update a specific book by ID. - DELETE /api/v1/books/{id}: Delete a specific book by ID.
Error Handling Example:
If a client requests a book that does not exist: - Response: 404 Not Found - Body: Body will look like this

Implementing a REST API

To implement a REST API, you can use various programming languages and frameworks. Here's an example using Node.js with Express.js:

Forem: Abhishek Panwar

Why react components starts with capital letter ?

this keyword in JS

Complete redux toolkit (Part -5)

Part 5: Testing Strategies for Redux Toolkit and RTK Query

1. Importance of Testing in Redux Applications

2. Setting Up a Testing Environment

3. Unit Testing Redux Slices

Step 1: Testing Reducers

4. Testing RTK Query API Slices

Step 1: Setting Up MSW for Mocking API Requests

Step 2: Writing Tests for RTK Query Endpoints

5. Integration Testing Redux with Components

Step 1: Writing Integration Tests with React Testing Library

6. Best Practices for Testing Redux Toolkit and RTK Query

7. Conclusion

Complete redux toolkit (Part - 4)

Part 4: Advanced Topics in RTK Query

1. Introduction to Advanced RTK Query Concepts

2. Customizing baseQuery for Authentication

Step 1: Create a Custom baseQuery

Step 2: Use the Custom baseQuery in createApi

3. Optimistic Updates with RTK Query

Step 1: Implement Optimistic Updates in Mutations

4. Handling Dependent Queries

Example: Fetch Post Details Based on Selected Post ID

5. Polling and Real-Time Data with RTK Query

Step 1: Use Polling in Queries

6. Optimizing Performance with selectFromResult

Step 1: Using selectFromResult to Optimize Re-Renders

7. Conclusion and Next Steps

Complete redux toolkit (Part -3 )

Part 3: Introduction to RTK Query

2. Setting Up RTK Query

Step 1: Define an API Service

Step 2: Integrate API Service into the Redux Store

3. Using RTK Query in Components

Step 1: Fetching Data with useFetchPostsQuery

Step 2: Adding Data with useAddPostMutation

4. Handling Cache, Errors, and Optimistic Updates

Step 1: Using providesTags and invalidatesTags

5. Conclusion and Next Steps

Complete Redux Toolkit - Async Logic with(Part -2)

Complete Redux toolkit (Part-1)

Purpose of Redux Toolkit

REST API and Its Architecture

2. Customizing `baseQuery` for Authentication

Step 1: Create a Custom `baseQuery`

Step 2: Use the Custom `baseQuery` in `createApi`

6. Optimizing Performance with `selectFromResult`

Step 1: Using `selectFromResult` to Optimize Re-Renders

Step 1: Fetching Data with `useFetchPostsQuery`

Step 2: Adding Data with `useAddPostMutation`

Step 1: Using `providesTags` and `invalidatesTags`