Mastering Server-Side Integrations in React: Essential Topics

Hey there! If you're building modern web apps, you'll almost always need to connect to a server to read and write data.

That's where React and Redux Toolkit come in, and to use them effectively, there are some key topics that every front-end developer should know.

In this post, we're going to dive into those topics, like async programming with JavaScript, understanding APIs, and React Router.

By the end, you'll have a solid grasp of the basics, which will help you build some sweet apps that can talk to the back-end with ease. Sound good? Let's do this! 🏄‍♂️

1. Asynchronous programming with JavaScript

Redux Toolkit uses asynchronous code extensively, so you need to be comfortable with Promises, async/await, and the fetch API. For example, you can use the async and await keywords to make a fetch request and parse the JSON response.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
fetchData();

In JavaScript, asynchronous code is executed outside of the normal execution flow, allowing other code to continue running while the asynchronous code is executing.

Async and await provide a more straightforward way to write asynchronous code that looks more like synchronous code.

The async keyword is used to define a function that returns a Promise, and the await keyword is used to wait for a Promise to resolve before continuing with the execution of the code.

A Promise is a special object in JavaScript that lets you handle the result of an asynchronous operation, like fetching data from a server or reading a file.

It's like a ticket that you get when you ask for something, and you can use that ticket later to see if your request has been completed or not. If your request is successful, you can get the result you asked for. If there's an error, you can handle it appropriately.

This makes asynchronous code easier to read and write, and can help reduce bugs and improve code maintainability.

2. Understanding APIs

APIs are how we connect front-end applications with back-end servers.

You need to be familiar with APIs, including how to use REST APIs and how to handle responses in JSON format.

You should also how to send and receive data using HTTP methods (GET, POST, PUT, DELETE, etc.). Here's an example of how to use the fetch API to make a GET request to an API.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Building on the topic of asynchronous programming, let's see how we could create a function to post a product to an API:

async function postProduct(product) {
  const response = await fetch('https://api.example.com/products', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(product)
  });
  if (!response.ok) {
    throw new Error(`Failed to post product: ${response.status}`);
  }
  const result = await response.json();
  return result;
}

// Example usage:
const product = {
  name: 'New Product',
  price: 10.99,
  description: 'This is a new product'
};
const result = await postProduct(product);
console.log(result);

In this example, we define an async function called postProduct that takes a product object as an argument.

Inside the function, we use the fetch API to send a POST request to the API endpoint https://api.example.com/products.

We include the Content-Type header to indicate that the data being sent is in JSON format, and we pass the product object as the request body, after converting it to a JSON string using JSON.stringify.

If the API responds with a status code other than 200 OK, we throw an error with the corresponding status code. Otherwise, we use the json method of the response object to parse the response data, and return the parsed result.

This example code can be adapted to work with other APIs and other HTTP methods other than POST, and can be used as a starting point for building more complex API integrations in your React and Redux Toolkit application.

You could end up implementing all the functions needed to CRUD a product (Create, Read, Update and Delete):

// Create a new product
function createProduct(product) {}

// Retrieve a single product by ID
function getProduct(productId) {}

// Retrieve a list of all products
function listProducts(filters) {}

// Update a single product by ID
function updateProduct(productId, updates) {}

// Delete a single product by ID
function deleteProduct(productId) {}

3. Redux fundamentals

You're gonna want to have a good understanding of the core principles of Redux, including how to create actions, reducers, and the store.

Their official Getting Started page is a must. The video at the end of the page is a complete walkthrough of all the essentials. Don't miss it 😉

https://redux-toolkit.js.org/introduction/getting-started

Here's an example of how to create a simple counter using Redux:

const initialState = { count: 0 };
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
const store = Redux.createStore(reducer);
store.dispatch({ type: 'increment' });
console.log(store.getState().count);

And another example using Redux Toolkit to create a slice for fetching products from an API:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async () => {
    const response = await axios.get('/api/products');
    return response.data;
  }
);

const productsSlice = createSlice({
  name: 'products',
  initialState: {
    products: [],
    status: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.products = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default productsSlice.reducer;

And this is how you would use it in a React component:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchProducts } from './productsSlice';

function ProductList() {
  const dispatch = useDispatch();
  const products = useSelector((state) => state.products.products);
  const status = useSelector((state) => state.products.status);
  const error = useSelector((state) => state.products.error);

  useEffect(() => {
    dispatch(fetchProducts());
  }, [dispatch]);

  let content;

  if (status === 'loading') {
    content = <div>Loading...</div>;
  } else if (status === 'succeeded') {
    content = products.map((product) => (
      <div key={product.id}>
        <h2>{product.name}</h2>
        <p>{product.description}</p>
      </div>
    ));
  } else if (status === 'failed') {
    content = <div>{error}</div>;
  }

  return (
    <div>
      <h1>Product List</h1>
      {content}
    </div>
  );
}

export default ProductList;

Let's talk about middlewares

You should also be familiar with the concept of a middleware, which is used heavily in Redux Toolkit and many other frameworks, since this is an implementation of a widely applied Design Pattern called Chain Of Reponsibility.

Think of your front-end app as a line of people waiting to get into a club.

🧍🧍‍♂️🧍‍♀️🧍‍♂️🧍‍♀️🧍🧍‍♂️🧍‍♀️➡️👮➡️🏠

Each person in the line represents a different part of your application, like the UI or the logic that fetches data from an API. The bouncer at the door is the server that you're trying to access.

Now, imagine that you want to give the bouncer some extra instructions before they let your app in. Maybe you want to make sure they check everyone's ID, or that they stamp each person's hand before they enter. You don't want to slow down the line, but you also want to make sure everything goes smoothly.

That's where middleware comes in! In our example, middleware would be like having an extra person in line between your app and the bouncer. This person can give the bouncer any extra instructions you need without slowing down the line. It's like a helper that can modify or check each request that your app makes to the server.

🧍🧍‍♂️🧍‍♀️🧍‍♂️➡️👮➡️🧍‍♂️🧍‍♀️➡️👮➡️🏠

In the world of web development, middleware is a piece of code that sits between your application and the server. It can intercept and modify requests or responses, check authentication, or perform other functions that help your app work correctly.

So, in short: middleware is like an extra person in line that can help your app talk to the server more effectively without slowing things down. I hope that makes sense!

Now, let us improve our previous Redux Toolkit slice to add an authentication middleware, one that will automatically add an Authorization header to every request:

export default authHeaderMiddleware = (storeAPI) => (next) => (action) => {
  const state = storeAPI.getState();
  const authHeader = state.auth.token ? `Bearer ${state.auth.token}` : null;

  if (authHeader) {
    action.meta = action.meta || {};
    action.meta.headers = {
      ...action.meta.headers,
      Authorization: authHeader,
    };
  }

  return next(action);
};

Then, we just need to configure our store to use it:

import { configureStore } from '@reduxjs/toolkit';
import authHeaderMiddleware from './authHeaderMiddleware';
import authReducer from './authSlice';

const store = configureStore({
  reducer: {
    products: productsReducer,
    auth: authReducer,
  },
  middleware: [authHeaderMiddleware],
});

export default store;

4. React Router

React Router is a popular library for navigating between different pages or views in a single-page application.

You should have experience using React Router to navigate between pages or views. Here's an example of how to use it to define routes for two pages:

import { BrowserRouter, Route, Link } from 'react-router-dom';
function Home() {
  return <h1>Home</h1>;
}
function About() {
  return <h1>About</h1>;
}
function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

5. React component lifecycle methods

The component lifecycle is a set of methods that are called at different stages of a component's existence, from creation to deletion.

For example, when a component is first created, the componentDidMount method is called. This is a good place to make an initial API request to retrieve data that the component needs to render.

When the API response is received, you can update the component's state using setState and trigger a re-render of the component.

As the user interacts with the component, other lifecycle methods such as componentDidUpdate can be called, which provide an opportunity to make additional API requests or update the component's state in response to changes.

Here's a simple example to get you started:

import React, { Component } from 'react';
import { getProducts } from './api';

class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    this.fetchProducts();
  }

  async fetchProducts() {
    try {
      const products = await getProducts();
      this.setState({ products, loading: false, error: null });
    } catch (error) {
      this.setState({ error, loading: false });
    }
  }

  render() {
    const { products, loading, error } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    }

    if (error) {
      return <div>Error: {error.message}</div>;
    }

    return (
      <div>
        {products.map(product => (
          <div key={product.id}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
          </div>
        ))}
      </div>
    );
  }
}

export default ProductList;

Alternatively, if you're working with Functional Components, the useEffect hook is the alternative:

import React, { useState, useEffect } from 'react';
import { getProducts } from './api';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchProducts();
  }, []);

  async function fetchProducts() {
    try {
      const products = await getProducts();
      setProducts(products);
      setLoading(false);
      setError(null);
    } catch (error) {
      setError(error);
      setLoading(false);
    }
  }

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

🎁 Bonus

In addition to the essential topics, there are several Redux Toolkit-specific topics and best practices for managing state that can help you build robust and scalable applications.

1. Redux Toolkit specific topics

Redux Toolkit is a library that provides a streamlined API and utilities for working with Redux. It simplifies several common Redux use cases, such as creating slices, writing reducers, and handling side effects. Some techniques you should know include:

Creating a Slice: A slice is a collection of Redux actions and reducers that handle a specific piece of the store state. You can create a slice using the createSlice function, which generates the reducer and action creators for you. Here's an example:

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

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

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

Handling Side Effects: Redux Toolkit provides a built-in middleware called createAsyncThunk that simplifies handling asynchronous actions. This utility lets you create a "thunk" function that dispatches multiple actions to handle the various stages of an async operation, such as "pending", "fulfilled", and "rejected". Here's an example:

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

// Define the async thunk to handle the side effect
export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId, thunkAPI) => {
    const response = await fetch(`/users/${userId}`);
    const user = await response.json();
    return user;
  }
);

// Define the slice with the initial state and reducer
const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
    status: 'idle',
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

// Define the thunk middleware to dispatch the async thunk
const fetchUserMiddleware = (store) => (next) => (action) => {
  if (action.type === fetchUser.type) {
    next(action);
    const { dispatch } = store;
    dispatch(fetchUser(action.payload));
  } else {
    next(action);
  }
};

// Configure the store with the slice and the thunk middleware
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    user: userSlice.reducer
  },
  middleware: [...getDefaultMiddleware(), fetchUserMiddleware]
});

// Dispatch the async thunk from a component
import { useDispatch, useSelector } from 'react-redux';

function User({ userId }) {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.user);
  const status = useSelector((state) => state.user.status);
  const error = useSelector((state) => state.user.error);

  useEffect(() => {
    dispatch(fetchUser(userId));
  }, [dispatch, userId]);

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'failed') {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

About side effects in Redux

This is more of an advanced topic.

In Redux, a side effect is anything that happens outside of the reducer function that can affect the state of the application. Side effects include things like network requests, database queries, reading from or writing to local storage, and so on.

In the example above, we handle the API call to fetch an user as a side effect. But wouldn't it be the main intended action? 🤔 Wouldn't a side effect be something like updating a related state or something else?

Fetching a user from an API is indeed an important part of the application's functionality, and in this example, it might not be strictly necessary to consider it a side effect. However, in a larger application, fetching the user might be just one of many different actions that can affect the application's state, and it could be important to handle it consistently with other actions that are clearly side effects.

In addition, by treating fetching the user as a side effect, we can use Redux Toolkit's built-in support for handling side effects with middleware such as Redux-Thunk or Redux-Saga.

So, while it may not be strictly necessary to consider fetching the user as a side effect in this specific case, it can be a helpful practice in larger applications where there are many actions that can affect the state of the application.

2. Best practices for managing state

Managing state is a critical part of building scalable and maintainable applications. Keep these best practices in mind when working with state in React and Redux:

Minimize the Number of Sources of Truth: Avoid storing the same data in multiple locations, as this can lead to inconsistencies and bugs. Instead, keep the data in a single "source of truth", such as the Redux store.
Normalize Your Data: Normalize your data in the Redux store to keep it organized and easy to manage. This involves using a "flat" data structure, where related data is stored in separate slices of the store.
Use Selectors to Access Data: Use selectors to access data in the store, rather than accessing the store directly from your components. This makes your code more maintainable and reduces the risk of breaking changes.
Avoid Mutating State Directly: Avoid directly mutating state in Redux reducers, as this can lead to unpredictable behavior. Instead, use the immer library or the spread operator to create new copies of state.
Use Middleware Sparingly: Use middleware sparingly and only when necessary. Middleware can add complexity and reduce performance, so only use it when you need to handle side effects or other advanced use cases.

Conclusion

To sum it up: building a front-end application that integrates with a back-end server can be a challenging task, but understanding the essential topics that we've covered in this article can help you create a robust and scalable application that meets your requirements and your users' needs.

From async programming with JavaScript to APIs, React Router, and Redux Toolkit, these topics provide the foundation for a powerful and effective front-end developer toolkit.

Remember that it's important to stay up to date with the latest trends and best practices in the industry, so don't stop there, keep learning and exploring new ways to improve your skills.

With a solid understanding of the topics covered in this article, you'll be well on your way to building great front-end applications that can communicate with a back-end server with ease.

Happy coding! 🙂

PhillCode