Forem: LearnFrontend.IO

Redux Best Practices

LearnFrontend.IO — Sun, 19 Jun 2022 15:51:17 +0000

Redux Best Practices

This article has been published in my personal blog too.

Redux is a library used for global state management, meaning if you have a piece of state that you want to access in different places of your app, you can use Redux to manage that state and make it easily accessible anywhere. The global state can be anything from logged-in user information to UI state such as theme, etc.

Redux is being used a lot together with React apps, however, it is possible to use Redux with any other library. Make sure you check out this tutorial on how to use Redux with React.

This guide can be beneficial if you have started learning redux lately, but even
if you are an experienced developer working with Redux already. Additionally following
this guide is going to improve your general skills with Redux by a lot and make you
ready to work on bigger codebases that companies have.

Below I have brought up some of the best practices when using Redux that when followed,
will help you make apps that scale well and have better performance.

Redux Toolkit

Redux Toolkit is a wrapper library written for the original Redux for the sake of making it easier, and faster to use Redux by reducing the boilerplate and introducing features such as thunks out of the box without having to install third-party libraries.

It is fully written in Typescript and
is highly recommended that Redux Toolkit is used instead of the original Redux when
using it for managing global state.

It offers a flexible API, making it possible for making the state management scalable
without having to worry about the limits of the library. One of the key concepts
of Redux is immutability, and Redux Toolkit makes it easier than ever to keep the
immutability by already setting up the ImmerJS
library internally, so the developer does not have to worry about accidentally modifying
the state directly.

One of the most noticeable things for developers when switching to Redux Toolkit
is the way reducers are created. Previously we used action creators and created a
reducer where we handled all the actions.

Now we can use the createSlice API
to create reducers and it will eliminate the need to write action creators by creating
them for you.

An example of createSlice can be seen below:

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

const { actions, reducer } = createSlice({
  name: "user",
  initialState: { user: { id: 0 } },
  reducers: {
    userLoggedIn: (state, action: PayloadAction<number>) => {
      state.user.id = action.payload;
    },
  },
});

// Later you can dispatch actions by accessing the fields inside `actions`.
dispatch(actions.userLoggedIn(5));

It also introduces a whole new feature that is not in the original Redux, and that is the RTK Query which handles API calls, we are going to talk about it in a later section.

By using Redux Toolkit, the logic of your app will be simplified and it will be easier
for devs to maintain the codebase. If you haven’t already switched to Redux Toolkit,
then you should probably consider it.

The library can be installed by using the following command

npm i @reduxjs/toolkit

Proper Folder Structure

A good folder structure is crucial for scalability no matter what app you are building, and is not any less true for apps using Redux. However, choosing the right folder structure can be really hard, I’m going to bring the most preferred ways of structuring your Redux app, one that has been tested and is very scalable for building massive web applications.

It is a feature-based structure and it means structuring the app based on features,
for example, if one of the features you have is the checkout process for e-commerce,
then you might want to group all related global states for that process in a single
reducer created using createSlice that we mentioned above.

You will have separated files for the reducers, selectors, thunks, types, etc., however,
everything related to a feature will be put inside the same folder. Take the example
below:

/src
    index.tsx
    /pages
    ...
    /features
        /checkout
            // The slice mainly contains the reducers functionality
            // and exports the actions. Would be created using createSlice API.
            checkoutSlice.ts

            // This file would be used for writing the types
            // if you are using typescript.
            // Example here would be the store interface.
            checkoutTypes.ts

            // Here would go all the selectors that would
            // be used to select data from the redux store for this feature.
            checkoutSelectors.ts

            // Here would go all the thunks that would be used by this feature.
            checkoutThunks.ts

            // In this file there would be any functions which you would
            // use in your features store.
            // Can be anything that will make the code more readable,
            // say a function which does modifications to the payload
            // before saving to the store.
            checkoutHelpers.ts

            // It is not limited to only these files, you can
            // create anything you want, ex. you can have epics file, constants, etc.

However, no folder structure is perfect, and finally, it is up to you how you structure everything. As Redux is used to maintain a global state, it can get really messy if we start putting everything in Redux. So it is a good practice to keep Redux as small as possible with only data that really needs to be used in multiple places of the app. When developing an app, you should really take the time to think about where the data should live and not just put everything in Redux.

In libraries like React it has started being easier to separate data, for example,
you can use the local component state for managing component UI data, or even context
providers if
you need some specific data across a page. Context providers should also be considered
when saving UI data. It can really help implementing features with the principle
of single responsibility
in mind. Say for example you can have 1 context provider for the Theme, and another
for UI changes in other components (ex. navigation, layout, etc.)

Event actions

When an action is dispatched, all of the reducers will be notified and every single one of them will check if they can handle the action. Not only that, but the Redux dev tools will be a mess trying to see what action was fired when. That’s why we should try to think of actions as events that happened and not what the action is changing. For example, we should rather have an action called userLoggedIn than setUserId.

Normally in the userLoggedIn event action, you could put what more data in the
payload than in the setUserId. For example, in the userLoggedIn you could
set all the user data in Redux, including any side effects you want to have when
the user logs in (ex. changing the status to authenticated). Additionally, you can
have multiple reducers responding to a single action, and with createSlice now
it is even easier to respond to other external actions using the extraReducers
field, see the example below:

// userSlice.ts
export const { actions: userActions } = createSlice({
  name: "user",
  //...
  reducers: {
    userLoggedIn: (state, action) => {
      state = action.payload;
    },
  },
});

// environmentSlice.ts
export const environmentSlice = createSlice({
  name: "environment",
  //...
  extraReducers: (builder) => {
    builder.addCase(userActions.userLoggedIn, (state, action) => {
      state.authenticationStatus = "loggedIn";
    });
  },
});

Thinking of actions as events we can keep the number of dispatched actions lower and debugging will always be faster as the dev tools will be cleaner.

Selecting small pieces of State

Hooks like useSelector will cause the component using it to rerender every time the returned value has changed. Meaning if you select the whole user object, whenever something in the object changes, even if you didn’t use it in the component, it is still going to rerender the component. So it is always preferred to only select what you really need from the state. So instead of selecting the whole user object, we would select only the user firstName. This way there will be a rerender only when the firstName changes.

Example:

// Will cause a rerender no matter if you are not using the whole user object.
const selectUser = ({ user }) => user;

// Preferred way, as this will cause a rerender only when firstName changes.
const selectUserFirstName = ({ user: { firstName } }) => firstName;

RTK Query for the API requests

RTK Query is a feature from Redux included in the Redux Toolkit library to make it easier to make API requests and handle caching. RTK Query aims to totally replace thunks for making API requests.

RTK Query introduces a new API called createApi that can be used to create the
necessary functions for making the requests and handling caching. It includes features
such as cache invalidation, prefetching, code splitting, etc.

It is written to work with React out of the box as it creates hooks that can be used
directly in the components for making the requests.

Let's take a look at a simple example of how to create simple query hooks we can
use in React.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// createApi should only be used once per app
const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: "/"
  }),
  endpoints: (build) => ({
        // Building a query function that will later be transformed in a hook
    getPost: build.query({
      query: (id) => ({ url: `post/${id}` })
    })
  })
});

// Hook exported to be used in React
export const useGetPostQuery = api.endpoints.getPost.useQuery

// MyComponent.tsx
const { data, isLoading, ... } = useQuery();

RTK Query can be very useful, however, compared to other libraries such as React Query or SWR, it is more complicated and requires more boilerplate. So you should really do your research on what you need for your app before deciding on whether to use RTK Query or other alternatives. If you are building apps from the start which don’t need to work much with Redux then you can surly go with React Query or SWR, but if you already have a massive application that uses Redux as its main state management solution and you can’t afford to introduce a new library, then RTK Query can be more suitable.

Are you interested in reading more about Frontend in general? Then make sure you follow us on Twitter to get the latest updates.

How to use React with Redux

LearnFrontend.IO — Thu, 16 Jun 2022 15:17:40 +0000

This article has been publish in my personal blog

Redux is a library used for managing global state, it can be used with or without React, but in this tutorial, we are going to take a look at how we can use Redux together with React.

You will need the following tools:

A code editor - I will be using VSCode but you can use any you like.
npm & npx
- Install on Linux: sudo apt install npm nodejs ;npm i -g npx
- Install on Windows

Initial setup

First, we are going to start by creating a ReactJS app and installing Redux.

I will be using Typescript but you
can also do it in Javascript:

Run the following commands in the terminal. (If you want to do it in Javascript,
make sure you remove the “—template typescript”
flag)

npx create-react-app my-react-redux-app --template typescript
cd my-react-redux-app

Now we need 2 libraries for redux, the first one has the redux API and the second one has the Redux configured to be used with React.

npm i @reduxjs/toolkit react-redux

Now go ahead and replace the content of App.tsx with the following:

Don’t worry about it as it's just JSX
with an input whose value we are going to save in the store when the button is clicked.

import { useState } from "react";

function App() {
  const [localStateName, setLocalStateName] = useState("");

  return (
    <div className="App">
      <input
        type="text"
        placeholder="name"
        value={localStoreName}
        onChange={(e) => setLocalStoreName(e.target.value)}
      />
      <button>Submit to store</button>
      <br /> <br /> <hr />
      Name in the store: <code>asd</code>
    </div>
  );
}

export default App;

Store Setup

Next, we are going to configure the store and create a reducer that will handle our state changes

Redux state is immutable
and the only way to update it is using reducers.
Think of reducers as state machines, they handle how the state is changed.

First, create a new file called store.ts (or store.js if you are not using typescript),
import a function called configureStore, and create an empty store with it:

import { configureStore } from "@reduxjs/toolkit";

export const myStore = configureStore({ reducer: () => {} });

Now go ahead and import createSlice from the same library and create a reducer with it. createSlice is a wrapper around the old API from redux which reduces quite some boilerplate when creating reducers.

createSlice requires an object with 3 arguments. The name of the reducer, the initial
state of the sub-store, and the reducer itself. You can place the code just above
myStore.

export const { actions, reducer } = createSlice({
  name: "user",
  initialState: { name: "" } as { name: string },
  reducers: {},
});

Now we can add our reducer to the store configuration. Modify myStore so it gets the reducer we created:

export const myStore = configureStore({ reducer: reducer });

Actions

We dispatch an action to the reducer when we want to have a state change. And the reducer will know what function to trigger for updating the state based on the action that we dispatch. But first, we need to create actions that we can use. For now, let us create 1 action and call it “nameUpdated”. Basically, it will update the "name"`property we have in the state with whatever payload we give.

Payloads
can be passed when you dispatch an action. We are going to take a look at that a
bit later.

Inside the createSlice in the reducers property, add a function called nameUpdated
like below

`tsx
import {
configureStore,
createSlice,
PayloadAction, // Typescript type used to type the action.
} from "@reduxjs/toolkit";

export const { actions, reducer } = createSlice({
...
reducers: {
nameUpdated: (state, action: PayloadAction) => {
state.name = action.payload;
},
},
});
`

Redux Provider for React

Later we are going to use hooks to work with the redux store from react components. And those hooks need access to the redux store. react-redux allows that by providing a React context provider to us, we can wrap our App with.

You can do so by going to index.ts (or index.js) and importing the initStore you
created earlier and the Provider from “react-redux”

tsx import { initStore } from "./store"; import { Provider as ReduxProvider } from "react-redux";

Now you can wrap the App with the Provider and pass the initStore through the store prop.

tsx ... root.render( <React.StrictMode> <ReduxProvider store={initStore}> <App /> </ReduxProvider> </React.StrictMode> );

Updating the store

We are going to update the store by dispatching the actions that we created earlier. Let's go in the App.tsx file and do that when the user clicks the submit button. First, import the useDispatch hook from react-redux and import the actions you created from store.ts

tsx import { useDispatch } from "react-redux"; import { actions } from "./store";

Now let us get the dispatch function from useDispatch hook by executing it and getting its return value.

`tsx
function App() {
const dispatch = useDispatch()

const [localStateName, setLocalStateName] = useState("");
...
}
`

Next, we are going to create the click handler, so when we click the submit button it will dispatch the action and change the state with the value that is in the localStateName. Create the function just below the useState hook and dispatch the nameUpdated action.

`tsx
function App() {
...
const [localStateName, setLocalStateName] = useState("");

const handleClick = () => {
dispatch(actions.nameUpdated(localStateName));
};

...
`

We can just pass this function to the submit button as click handler and when we click in the submit button it is going to change the state.

tsx function App() { ... return ( ... <button onClick={handleClick}>Submit to store</button> ... ); }

I would suggest you install the Redux Devtools and then you can track any changes to the redux state. For example, let's type some random input and press submit to see what changes in the state.

You can open Redux Devtools by opening the chrome dev tools (normally F12) and finding
the redux tab. Should be at the end if you just installed it.

Now type something in the input and press “Submit to store”

We can see that the name in the state has changed to the value we typed in the input.
You can play around with the dev tools a bit to get used to them as they can be really
helpful. Check out this tutorial on how to use the Redux devtools.

Selecting the state

react-redux gives us a hook called useSelector, which we can use to select a state from the store. It accepts a callback where it will pass the state as the first argument and will cause the component to rerender every time the return value of the callback changes.

Go ahead and import it from react-redux like below

tsx import { useDispatch, useSelector } from "react-redux";

Lets use it to get our name value from the state.

`tsx
const [localStateName, setLocalStateName] = useState("");

const name = useSelector(({ name }: { name: string }) => name);

const handleClick = () => {
...
`

Now you can render the name directly in JSX

tsx ... Name in the store: <code>{name}</code> ...

Now every time you type something and press submit the state in redux is going to get updated and will inform your component of the update and will change the rendered value for you.

Conclusion

Redux is a very scalable library for managing global states, is being used everywhere, from e-commerce stores to anything that requires state management. And it seems like the perfect match for React. I use it almost every day and can say that I’m very happy with it.

If you liked the tutorial make sure you follow me on Twitter
to get the latest articles, or if you would like a tutorial on something you prefer,
make sure you let me know about it and I’ll do my best to bring it to you. My email
is support@learnfrontend.io

Are you interested in reading more about Frontend in general? Then make sure you follow us on Twitter to get the latest updates.

What is functional programming

LearnFrontend.IO — Tue, 14 Jun 2022 15:47:46 +0000

This is my second blog post and it has been published in my personal blog too

Functional programming means using functions as building blocks to construct a process. Unlike OOP, functional programming is not an imperative paradigm but a declarative one, meaning it describes what the code has to accomplish, but not how.

Languages such as Haskell have been completely written with functional programming in mind. Javascript also makes it possible to follow functional programming principles, however, it also supports OOP.

Below are some of the key concepts from functional programming

Pure functions

Pure functions are simple, reusable blocks of code written as functions, that don’t have any side effects, meaning the output of a function is defined by its input.

They should not modify anything outside of the function and should be stateless, meaning whenever the function runs, it should behave like it was its first time running. This also has more benefits like reducing the number of bugs that exist when there is a shared state between functions.

Example of an impure function that modifies a variable outside of itself.

Immutability

The main idea behind immutability is that when the data is created, it will never be mutated again. In functional programming, this is a key concept. It helps get rid of the rather complex bugs caused by mutating data over time. Libraries such as React and Redux, only provide a state which is not modifiable directly, instead, they make it possible to always create a new state instead.

ES6 array functions are an example of functions that don’t modify the data directly but instead always return a new one. One of them is the map function which can be seen in the example below.

Conclusion

Functional programming can be very useful whether you are building frontend web applications or any other type of app. So if you haven’t already, I hope you give it a try and check for yourself if it's easier writing functional code.