Forem: Stas Fedyna

Redux Toolkit and Typescript (the best way to manage application state)

Stas Fedyna — Mon, 22 Mar 2021 07:36:02 +0000

Today we will talk about a new and in my opinion a phenomenal functionality for working with Redux, namely - Redux Toolkit (I really hope you understand the concept of how Redux works before you start reading this article as otherwise, some terminology may not be clear for you).

Redux Toolkit is an updated vision of Redux developers on how to manipulate data globally and do it easily and effortlessly.

Let's take a step back and recall what problems the classical approach has 🤔

If don't go into detail and statistical comparison, Redux isn't liked by developers (especially beginners) because of its complexity.

First, you need to spend a lot of time understanding the ideology of Redux, then spend time creating basic things (actions, action creators, reducers and etc.). 🤯

But we are developers - we want to write code, not waste time on settings. Right? 👩‍💻

Below I will describe my vision of how you can work with Redux Toolkit and use it with TypeScript (since I adore TypeScript and sincerely recommend using it in your projects).

Installation ⌛

I want to start by using the standard create-react-app structure with TypeScript.

This can be done with the following commands:

# npm
npx create-react-app my-app --template typescript

# yarn
yarn create react-app my-app --template typescript

After that, let's add the toolkit module directly to our project:

# npm
npm install @reduxjs/toolkit

# yarn
yarn add @reduxjs/toolkit

And directly the react-redux module:

# npm
npm install react-redux

# yarn
yarn add react-redux

Deep dive into Redux Toolkit 🤿

The new and most important concept that we will immediately encounter will be - slice.

To begin within the src folder I will create one more folder with the name - slices.

Inside, I'll create a profile.ts file that will contain functionality that pertains to the user's profile (it's a simple division by type of work, nothing special).

(React is flexible in terms of architecture, so you can choose a different files location. My choice is based on the ability to conveniently use the absolute paths provided by default when using react with TypeScript. You just need to find tsconfig.json file, find "compilerOptions" object and add another field - "baseUrl": "src")

We go to the profile.ts profile.ts file. In order to create a slice directly, you need to import the function that is responsible for it, namely - createSlice. Together with it, we import the module - PayloadAction (about which I will tell later).

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

The createSlice function accepts an object with main fields:

name - describe the type of actions inside (for example, actions on user data or actions on authentication data);
the initial value for our redux state (any data type, mainly array, or object);
reducers (an object that will contain methods that will implement changes in our redux state).

const profileSlice = createSlice({
  name: 'profile',
  initialState: initialState,
  reducers: {},
});

Everything is clear with the name.

The next field is initialState. Let's create it above the implementation of the createSlice function (initialState can be made into a separate file depending on your wishes and the size of this very initialState).

It will look like a simple object with one field - email:

const initialState = {
  email: '',
};

The last field - reducers. Inside we describe the methods that will implement the change of our redux state.

Let's implement the changeEmail method (which represents just action creator).

const profileSlice = createSlice({
  name: 'profile',
  initialState: initialState,
  reducers: {
    changeEmail: (state, { payload }: PayloadAction<TPayload>) => {
      state.email = payload.email;
    },
  },
});

Now let's deal with everything that is described above and what is used here.

The first thing I want to note is that the changeEmail method takes two parameters (identity how a reducer does in a classic Redux structure).

The first parameter - state, which will contain the initial value and will change after applying some of our methods.

The second parameter is the object that represents the action (in the classic use of this object contains the type field and the payload field), but in our, we use only the payload, which is obtained by destructuring (ES6).

We add type for our payload using PayloadAction (which we imported).
PayloadAction takes the type created above implementation of function createSlice:

type TPayload = {
  email: string;
};

Now let's look directly inside in our changeEmail method:

changeEmail: (state, { payload }: PayloadAction<TPayload>) => {
  state.email = payload.email;
}

The first thing we can see is a somewhat unconventional approach to change the Redux state. We simply assign new values to state.email with the values we get with the payload.

And what about the rule of immutability, which we must always remember when we change the Redux state? (If you don't fully understand what I'm talking about, then I'll make a very quick explanation of what I mean).

The main concept of immutability when changing the Redux state is to always make a copy of the current Redux state (mostly using the spread operator with ES6 for objects and arrays) and then change the copy and return it as a new state of our Redux state. This is so that React can recognize the changes (since the references have changed) and redraw our component that uses data from the Redux state.

In this regard, the Redux Toolkit "under the hood" uses an additional module called immer. This module takes on the job of copying and granting just these rules of immutability. Therefore, we can not worry about it and change the fields directly.

Let's summarize what happened. We just took the old value from the Redux store and replaced it with a new one, which we passed to one of our components (will see later).

That's it, our first slice is ready, with which I congratulate you! 🎉.

After implementing createSlice, let's do the following:

export const profileReducer = profileSlice.reducer;
export const { changeEmail } = profileSlice.actions;

The first export is our reducer, which we will call profileReducer (we will need it soon).

The second export is just our created changeEmail method (our action creator).

All this is available to us by referring to our created slice - profileSlice.

Redux store configuration 🔧

Let's use our profileReducer (the first export from the profile.ts file) and work on a full-fledged redux connection.

In the src folder, create another folder - reducer. Inside create a file reducer.ts:

reducer.ts will look like this:

import { profileReducer } from "slices/profile";

const reducer = {
  profileReducer,
  // another reducers (if we have)
};
export default reducer;

We import our created reducer so that in the future we can add another and combine them together.

I will note one more interesting thing - the reducer object in which we can add other reducers is analogous to the use of the combineReducers function but without the additional import of this combineReducers function and the generally compact appearance of the whole combination structure.

Let's create another file - store.ts in the src folder:

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

export const store = configureStore({ reducer });
export type TStore = ReturnType<typeof store.getState>;

If we used the standard Redux approach, it would be an ideal place to add middleware (for example thunk) and connect redux-dev-tool. But we use Redux Toolkit, and here everything is much more interesting 🤩.

This is where the magic is hidden, which we don't see 🔮. In fact, the Redux-Toolkit already connected thunk and redux-dev-tool "under the hood" when we just used the configureStore function. Only 3 lines of code and what is great the result.

Additionally, on the last line, you can see the creating of the TStore type. It allows us to use this type in the case when we want to grab data from the Redux store (for example using selector hook - useSelector).

We go further and go to the last step of the redux connection - the connection in the index.tsx file:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "store";
import App from "./App";

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

This simply uses the Provider component, which should by default wrap our main internal component (App in our case) and use the store property with the value which has name store too (which we created and in the previous step and imported here).

We finished with the setup. Now let's use what we've been working on.

Using 🏄‍♂️

Go to the component where we want to use our previously created action creator (in my case it is the App.tsx file).

We import the useDispatch function (which we will need) and directly our action creator - changeEmail.

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeEmail } from "slices/profile";

const App = () => {
  const dispatch = useDispatch();
  const { email } = useSelector((state: TStore) => state.profileReducer);
  const handleEmailChange = () => {
    dispatch(changeEmail({ email: "newEmail@gmail.com" }));
  };

return (
  <div>
    <button onClick={handleEmailChange}>
      Change email
    </button>    
    <h2>
      Email: {email}
    </h2>
  </div>
);
}

export default App;

We added a button with an event - onClick which provides as add handleEmailChange function. Inside we call function dispatch with our action creator - changeEmail as a parameter. Inside changeEmail we see an object - it's actually our payload object.📦

Below the button, we have a header. Inside we use the variable - email. You've probably noticed that we got this variable from the Redux store using the previously mentioned hook - useSelector. useSelector accepts the function with the - state (to which we add the TStore type) parameter and returns the value we want to get.

After clicking the button we see a new result.

If we check Redux Dev-Tool (hope you have this useful extension) we can notice what everything is works and our Redux store is changed and now we have a new value for the field - email.

That's it, we have full functionality when working with Redux Toolkit.
We can create other methods, create other slices, perform asynchronous actions and use it all in our application.

Final code example you can check here.

Thank you very much for taking the time to read my article. I hope she helped you figure out the Redux Toolkit.

As always open to feedback ❤️

Three steps to understanding Babel

Stas Fedyna — Fri, 25 Sep 2020 11:43:17 +0000

Babel is a transcompiler, without which development would be much more difficult and not as convenient as now.

So what is the convenience of using Babel and what opportunities does it provide?

First of all, you need to understand the main task of Babel — the ability to write code in new standard (with new functionality) without worrying that this new functionality may not be supported by browsers.

The bottom line is that JavaScript is not standing still and is evolving rapidly. Due to this, we (developers) receive every year additions to the functionality of the language in the form of a new standard (so-called ECMAScript or simply ES).

But the fact that JavaScript is updated every year does not mean that the new functionality becomes available in browsers immediately. Everything is exactly the opposite. This is a fairly long process that takes a long time.

But we are developers and do not want to wait so long to start using something very cool and something that really simplifies our lives. That’s where Babel comes on stage.

What is he doing? Babel takes the code we wrote with the new functionality and converts it into an analog code, but older standard. This is done because it is this code browser understands without problems.

The following is an example of a transcompilation taken from the official Babel website.

It is important to note that there are no disadvantages to such a transformation (transcompilation). Our project doesn’t get slower or anything like that. So you can not worry.

To get the final code understandable to the browser, Babel performs 3 basic steps:

Parsing.
Transformation.
Code generation.

Step 1. Parsing

In the first step, the input data is code written by us with new functionality. Babel takes and converts this code into AST (Abstract Syntax Tree). AST looks like a regular JavaScript object (key: value).

It is not necessary to delve into the specified code, we will simply single out the most important idea — the AST-object contains a description of what our code is (functions, arguments, operators, destructuring, or simply declaring changes).

Module babel-parcel is responsible for this operation.

Step 2. Transformation

In this step, the input data is the AST object obtained from the previous step. As we remember, this object contains a description of what we use in the code (including the new functionality).

The main idea of this step — convert the input AST object with the new functionality into the same AST object with the old functionality. That is, when passing through the AST object there are keys and their values, which represent the new functionality and therefore must be replaced. As mentioned earlier, this is done so that the browser can perceive our code correctly.

Two modules are responsible for this step (transformation) at once — Babel-traverse and Babel plugin/presets, which have their tasks:

babel-traverse — a module that can parse the AST object and replace the required values according to the key.
babel plugin/presets — a module that contains a set of presets responsible for a single functional (usually 1 preset = 1 functional, where functional can be some independent unit — destructuring, function, etc.).

Step 3. Code generation

Last step. Input data — AST object, but with the old functionality (which we got from the previous step). All that remains is to turn it into a simple JS code that will be executed by the browser in the future.

The babel-generator module is responsible for this action.

At the output we get the code below (in the block on the right).

The block on the left is what we have from the beginning, our code, which in particular contains new functionality (creation of variables through const, arrow functions and a shortened version of the return from the same functions).

Next is the “magic” described above, namely 3 steps: parsing, transformation and code generation. Code generation is the end result and what is contained in the image in the right block.

Schematically, the entire life cycle can be depicted as follows:

And now that’s all. I hope I helped you understand how Babel works.

P.S. Don’t judge me harshly, as this is my first article and I’m always open to feedback ❤️