DEV Community: Arunava Modak

Make A ToDo App using React and ReduxToolkit

Arunava Modak — Sun, 21 Nov 2021 20:39:00 +0000

In this article we will learn the very basics of redux toolkit and make a simple app using react and redux toolkit. I have kept it very simple with respect to styling, using a little bit css, but you guys can choose whatever you need for styling.

What Is Redux ?

Redux is an open-source JavaScript library for managing and centralizing application state. It helps us to write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React.

What Is RTK And Why Do We Need It ?

According to the official documentation,

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

It was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"

You can read more about redux toolkit here.

So, lets take a peek at what we are looking to build

Step 1 - Initialize App and Install Dependencies

npx create-react-app rtk-todo --use-npm

this step initializes a basic react-app for you using npm. Next you need to install the dependencies.

npm install react-redux @reduxjs/toolkit

now run this following command to start the development server

npm start

Step 2 - Setup Your Folder Structure

Create a structure like this inside the src of your project, we will create our components in the components folder and put all store related stuff inside the redux folder.

📦src
┣ 📂components
┃ ┣ 📜AddTodo.js
┃ ┣ 📜TodoItem.js
┃ ┗ 📜TodoList.js
┣ 📂redux
┃ ┣ 📜store.js
┃ ┗ 📜tasksSlice.js
┣ 📜App.js
┣ 📜index.css
┗ 📜index.js

Step 3 - Redux

Configuring a Redux is an extremely simple process with Redux toolkit. Let's start with writing our first slice.

Here we are using createSlice, it takes a 'slice name', 'initial state' and an object of reducers, and then generates corresponding action generators and action creators to reducers, and each reducer has access to the state and the action.

Then using this we need to configure out store. For that we need to use configueStore. It is an abstraction over the standard Redux createStore function adding some defaults easing our setup process.

Here we pass the slice reducer we created.

Note : If there is one function (like in our case), it is considered as the root reducer. If we have more than one a rootReducer is created behind the scenes, using the combineReducers functionality.

Next we just use this store in our index.js, like we used to do in normal redux.

Step 4 - UI Components

Before building any UI, we should always visualize our component tree. In this app too we would follow a structure something like this.

App
┣ AddTodo
┗ TodoList
┗ TodoItem

In App.js we just call our components and wrap them together.

Next, we make a way to enter the task and dispatch the addTask action.

We can easily import the action from the slice and dispatch it using the useDispatch function.

Now that we can add the task we need to display them. For that we can just access the state using useSelector and map over the todo list to display as we want.

Almost done, we just need to display each task and call the deleteTask action just like we had called the addTask action.

So now if we try to check the progress, we can see that we can add or delete any task and it looks like this, and its quite bad.

So now we add the styles, for this tutorial I have only added basic CSS, but you guys can go wild, maybe use a UI framework like Antd or MaterialUI too, would surely look nice.

And thats done, it looks excatly like we aimed it to be.

Untill next time Happy Building !! 😎

React Router V5 vs V6

Arunava Modak — Sun, 14 Nov 2021 20:55:44 +0000

React Router version 6 was released recently, and it is important for us to understand the changes as it is one of the most widely used react libraries out there.

So What Is React Router ?

React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.

In V6, there has been a lot of under the hood changes, be it an enhanced path pattern matching algorithm or addition of new components. Not only that but the bundle size has been reduced by almost 58%.

So here are some of the changes you can make to upgrade an existing project from React Router v5 to v6.

`Switch` Replaced With `Routes`

In v6, Switch in not exported from react-router-dom. In the earlier version we could use Switch to wrap our routes. Now we use Routes to do the same thing instead of Switch.

Changes In The Way We Define Our `Route`

The component that should be rendered on matching a route can not be written as children of the Route component, but it takes a prop called element where we have to pass a JSX component for that to be rendered.

The `exact` Prop Is Not Needed Anymore

With version 6, React Router has just become alot more awesome. The now better, path matching algorithm, enables us to match a particular route match without the exact prop. Earlier, without exact, any URL starting with the concerned keyword would be loaded, as the matching process was done from top to down the route definitions. But now, we do not have to worry about that, as React Router has a better algorithm for loading the best route for a particular URL, the order of defining does not really matters now.

So, to sum up these three points we can consider this code snippet.

In v5

import { Switch, Route } from "react-router-dom";
.
.
.
<Switch>
    <Route path="/">
        <Home/>
    </Route>
    <Route exact path="/cryptocurrencies">
        <Cryptocurrencies/>
    </Route>
    <Route exact path="/crypto/:coinId">
        <CryptoDetails/>
    </Route>
    <Route exact path="/exchanges">
        <Exchanges />
    </Route>
</Switch>

In v6

import { Routes, Route } from "react-router-dom";
.
.
.
<Routes>
   <Route path="/" element={<Home />} />
   <Route path="/crypto/:coinId" element={<CryptoDetails />} />
   <Route path="/cryptocurrencies" element={<Cryptocurrencies />} />

   <Route path="/exchanges" element={<Exchanges />} />
</Routes>

No Need To Install `react-router-config` Seperately

react-router-config allowed us to define our routes as javascript objects, instead of React elements, and all it's functionalities have to moved in the core react router v6.

//V5
import { renderRoutes } from "react-router-config";

const routes = [
  {
    path: "/",
    exact: true,
    component: Home
  },
  {
    path: "/cryptocurrencies",
    exact: true,
    component: Cryptocurrencies
  },
  {
    path: "/exchanges",
    exact: true,
    component: Exchanges
  }
];

export default function App() {
   return (
     <div>
       <Router>{renderRoutes(routes)}</Router>
     </div>
   );
}




//V6
function App() {
  let element = useRoutes([
    // These are the same as the props you provide to <Route>
    { path: "/", element: <Home /> },
    { path: "/cryptocurrencies", element: <Cryptocurrencies />,
      // Nested routes use a children property
      children: [
        { path: ":coinId", element: <CryptoDetails /> },
      ] 
    },
    {
      path: "/exchanges",
      element: <Exchanges />
    },
  ]);

  // The returned element will render the entire element
  // hierarchy with all the appropriate context it needs
  return element;
}

`useHistory` Is Now `useNavigate`

React Router v6 now has the navigate api, which most of the times would mean replacing useHistory to useNavigate.


//V5
import { useHistory } from "react-router-dom";

function News() {
  let history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <div>
      <button onClick={()=>{
           history.push("/home");
      }}>Home</button>
    </div>
  );
}


//V6
import { useNavigate } from "react-router-dom";

function News() {
  let navigate = useNavigate();

  return (
    <div>
      <button onClick={()=>{
          navigate("/home");
      }}>go home</button>
    </div>
  );
}

Some more common features of useHistory were go, goBack and goForward. These can also be achieved by navigate api too, we just need to mention the number of steps we want to move forward or backward ('+' for forward and '-' for backward). So we can code these features we can consider this.

//V5
import { useHistory } from "react-router-dom";

function Exchanges() {
  const { go, goBack, goForward } = useHistory();

  return (
    <>
      <button onClick={() => go(-2)}>
        2 steps back
      </button>
      <button onClick={goBack}>1 step back</button>
      <button onClick={goForward}>1 step forward</button>
      <button onClick={() => go(2)}>
        2 steps forward
      </button>
    </>
  );
}


//V6
import { useNavigate } from "react-router-dom";

function Exchanges() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-2)}>
        2 steps back
      </button>
      <button onClick={() => navigate(-1)}>1 step back</button>
      <button onClick={() => navigate(1)}>
        1 step forward
      </button>
      <button onClick={() => navigate(2)}>
        2 steps forward
      </button>
    </>
  );
}

`activeStyle` and `activeClassName` Props Removed From `<NavLink />`

In the previous version we could set a seperate class or a style object for the time when the <NavLink/> would be active. In V6, these two props are removed, instead in case of Nav Links className and style props, work a bit differently. They take a function which in turn gives up some information about the link, for us to better control the styles.

//V5
<NavLink
  to="/news"
  style={{ color: 'black' }}
  activeStyle={{ color: 'blue' }}>
  Exchanges
</NavLink>

<NavLink
  to="/news"
  className="nav-link"
  activeClassName="active">
  Exchanges
</NavLink>

//V6
<NavLink
  to="/news"
  style={({isActive}) => { color: isActive ? 'blue' : 'black' }}>
  Exchanges
</NavLink>

<NavLink
  to="/news"
  className={({ isActive }) => "nav-link" + (isActive ? "active" : "")}>
  Exchanges
</NavLink>

Replace `Redirect` with `Navigate`

Redirect is no longer exported from react-router-dom, instead we use can Navigate to achieve the same features.

//V5
import { Redirect } from "react-router-dom";

<Route exact path="/latest-news">
    <Redirect to="/news">
</Route>
<Route exact path="/news">
    <News />
</Route>


//V6
import { Navigate } from "react-router-dom";

<Route path="/latest-news" element={<Navigate replace to="/news">} />
<Route path="/news" element={<Home />} />

Please note the replace prop passed inside the element of the Route. This signifies we are replacing the current navigation stack. Without replace it would mean we are just pushing the component in the existing navigation stack.

That's it for today. Hope this helps you upgrading your react project, to React Router V6.

Thank you for reading !! 😇😇
Happy Coding !! Happy Building !!